Stylesheets - Fixed width and relative nested divs

Author

Fixed width and relative nested divs

ChrisW

2007-03-08, 6:17 pm

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



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

Ben C

2007-03-08, 6:17 pm

On 2007-03-08, ChrisW <c.c.wood@XXXXXXXXXX> wrote:
> 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">
>
> 
>
> </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.