Div Default Width 100%? 3

• Jan 11, 2008

• #2

vacunita

Programmer

Aug 2, 2001

9,166

MX

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.

 

Upvote 0 Downvote

• Jan 12, 2008

2
• #3

Vragabond

Programmer

Jul 23, 2003

5,100

AT

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]

 

Upvote 0 Downvote

• Jan 12, 2008

1
• #4

Lowet

Programmer

Jan 10, 2008

121

NO

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.

Code:

<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]

 

Upvote 0 Downvote

• Jan 12, 2008

• #5

Vragabond

Programmer

Jul 23, 2003

5,100

AT

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]

 

Upvote 0 Downvote

• Jan 13, 2008

• #6

Lowet

Programmer

Jan 10, 2008

121

NO

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]

 

Upvote 0 Downvote

• Jan 13, 2008

• #7

Vragabond

Programmer

Jul 23, 2003

5,100

AT

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]

 

Upvote 0 Downvote

• Jan 13, 2008

• #8

Lowet

Programmer

Jan 10, 2008

121

NO

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]

 

Upvote 0 Downvote

• Jan 28, 2008

• Thread starter
• #9

ice78991

Programmer

Nov 20, 2006

216

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

 

Upvote 0 Downvote

• Jan 28, 2008

• #10

kaht

Programmer

Aug 18, 2003

4,156

US

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

Click to expand...

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]

 

Upvote 0 Downvote