×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Div Default Width 100%?
2

Div Default Width 100%?

Div Default Width 100%?

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

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

RE: Div Default Width 100%?

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.

RE: Div Default Width 100%?

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%.

___________________________________________________________
Do something about world cancer today: PACT

RE: Div Default Width 100%?

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>has width: 100%</div>
<div style="display: inline;">has width: auto</div>
<div style="position: absolute;">has width: auto</div>

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

- Lowet

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!

RE: Div Default Width 100%?

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.

___________________________________________________________
Do something about world cancer today: PACT

RE: Div Default Width 100%?

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

- Lowet

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!

RE: Div Default Width 100%?

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.

___________________________________________________________
Do something about world cancer today: PACT

RE: Div Default Width 100%?

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

- Lowet

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!

RE: Div Default Width 100%?

(OP)
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

RE: Div Default Width 100%?

Quote:

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

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close