Div Default Width 100%? 3

[ice78991]

Will the following div fill the width of the screen ( ie width 100% ) in all browsers

<div style="background:#99FF00"></div>

 

[vacunita]

Nope. You have to specify a width.
By default if you don't specify dimensions on divs, they'll just fit their content, meaning they'll grow just enough to accommodate whats in them.

In your case since its empty, you wouldn't even see the div.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Vragabond]

vacunita is incorrect. The div will expand 100% of its container in width and automatic (as much as there is content inside of it) in height. That means as long as you put something in this div or you give it a valid height, it will appear as 100% of its container in width. Only the code you show would produce a thin line in your colour that expands the entire width of the div's container (say browser window, if there are no other containers).

Tables have their default width set to auto. That means they stretch only as far as the content. Also, floated elements switch their width from 100% (or whatever else they have) to auto. So, if your div would be floated, it would revert to automatic width, effectively making it 0. As long as it is not floated it will stay 100%.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Lowet]

DIVs are block elements and have by default width of 100% of the container. SPANs on other hand are inline elements and have by default width of it's content. Floated elements are also displayed as inline.

So if you don't want them to have the 100% width, change the "display" property to "inline" vice versa.

<div>[green]has width: 100%[/green]</div>
<div style="display: inline;">[green]has width: auto[/green]</div>
<div style="position: absolute;">[green]has width: auto[/green]</div>

<span>[green]has width: auto[/green]</span>
<span style="display: block;">[green]has width: 100%[/green]</span>
<span style="position: absolute;">[green]has width: auto[/green]</span>

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[Vragabond]

Actually, floated elements are always block level elements, but their width is set to auto instead of 100%. Table is another element that has width set to auto by default. But, I said all that before.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Lowet]

yeah. i know.
however, it's easiest to just set the display to inline or just use some SPANs instead..

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[Vragabond]

However, a block level element with auto width (any floated element or a table) is different to an inline element. For one, the first one can have margins, while the second one cannot.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Lowet]

Yes, that's right.
That's why I allways use DIVs for block code and SPANs for inline code then styling the layout..

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[ice78991]

quote::floated elements are always block level elements


I understood that floated elements were by definition elements that did not permit other elements on either side. If this is true how can it be that floated elements are block level elements

 

[kaht]

I understood that [!]floated[/!] elements were by definition elements that did not permit other elements on either side.

Did you mean to say block level instead of floated?

Floated elements are considered block level elements because they still adhere to most of the same rules as other non-floated block level elements.

As Vragabond pointed out above, a floated element will still support margins, whereas an inline element will not. It will also support the height and width attributes, but inline elements will not. The 2 block level rules that a floated element does not adhere to is that there is not a carriage return before and after a floated element, and a floated element gets it's width automatically set to auto.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]