468,505 Members | 1,648 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,505 developers. It's quick & easy.

Fixed width and relative nested divs

Just out of interest, does anyone know what the behaviour of the
following is supposed to be:

<div style="width: 80%">

<div style="width: 600px">

<!--HTML code goes here -->

</div>

</div>

If the users' screen size is, for example, 1280x1024, then the nested
div will no doubt just sit comfortably in the outer div. However, if
the users' screen size is set to something like 800x600, 80% of the
screen size will be 480px, which is obviously less than the nested
div's width.

This might be a strange thing to ask, but GoogleMaps requires the map
to be loaded into a div, with an id attribute set to, for example,
"map"

e.g: <div id="map" style="width: 650px; height: 725px;
padding:-5px;"></div>

The width and height need to be absolute values - since GoogleMaps is
based wholly on JavaScript, the map is loaded in the body tag, I'm not
sure if it's recommended to (although I'm sure it's possible) to
dynamically change the size of the map based on the current size of
the screen. Essentially, what I'm saying is that I've been brought up
on the importance of relative sizes for all types of elements, hence
why I wanted to nest the div in one that had a relative width, but I'm
not sure what the outcome will be!

Thanks in advance,

Chris

Mar 8 '07 #1
1 5675
On 2007-03-08, ChrisW <c.******@gmail.comwrote:
Just out of interest, does anyone know what the behaviour of the
following is supposed to be:

<div style="width: 80%">

<div style="width: 600px">

<!--HTML code goes here -->

</div>

</div>
In most cases the outer div's width will be 80% of its container's
width, and the inner div will be 600px wide. If that turns out to be
bigger than its container then it overflows, and there's an overflow
property you can set to say whether it should be clipped, just stick
out, or be given a horizontal scrollbar.
If the users' screen size is, for example, 1280x1024, then the nested
div will no doubt just sit comfortably in the outer div. However, if
the users' screen size is set to something like 800x600, 80% of the
screen size will be 480px, which is obviously less than the nested
div's width.
In that case it overflows. The general rule is that a block-level
element's width comes from its containing block, and has nothing to do
with the widths of its descendents. The exceptions are elements with
auto shrink-to-fit widths (floats, table cells, tables, absolutely
positioned boxes).
This might be a strange thing to ask, but GoogleMaps requires the map
to be loaded into a div, with an id attribute set to, for example,
"map"

e.g: <div id="map" style="width: 650px; height: 725px;
padding:-5px;"></div>

The width and height need to be absolute values - since GoogleMaps is
based wholly on JavaScript, the map is loaded in the body tag, I'm not
sure if it's recommended to (although I'm sure it's possible) to
dynamically change the size of the map based on the current size of
the screen. Essentially, what I'm saying is that I've been brought up
on the importance of relative sizes for all types of elements, hence
why I wanted to nest the div in one that had a relative width, but I'm
not sure what the outcome will be!
Try it and see, it works OK, although you may end up with a horizontal
scrollbar appearing on the main browser window.
Mar 8 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

28 posts views Thread by Gabriel | last post: by
4 posts views Thread by Rob Freundlich | last post: by
40 posts views Thread by Mark | last post: by
1 post views Thread by ChitownE | last post: by
8 posts views Thread by knoxautoguy | last post: by
2 posts views Thread by JD | last post: by
3 posts views Thread by gieforce | last post: by
reply views Thread by fmendoza | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.