Previous Message
Next Message

Preventing DIVs from dropping down the page on smaller screens.

Sent by francky on 31 March 2006 00:12

Austin, Darrel wrote:

>Is there a common way to solve DIVs from dropping down the page when the
>browser is shrunk short of using min-width settings?
>I'm having a problem mainly in IE. My markup is like this:
>Div pageWrapper
>   div leftNav {width: 200px; float: left;}
>   Div contentColumnsWrapper {margin-left: 210px;}
>       div leftColumn {float: left; width: 70%;}
>       div rightColumn {float: right; width: 25%;}
>       div clear: both
>    /div contentColumnsWrapper
>/Div pageWrapper
>In IE, if I reduce my window to a specific width, the leftColumn and
>rightColumn divs pop down below the leftNav div.
>In addition, at a certain percentage width, just my rightColumn will
>drop below the leftColumn. That issue appears to be that the two columns
>aren't retaining their percetange widths properly (ie, as the window
>shrinks, it appears both of those divs are taking up MORE than the 100%
>of the container.)
>Seems like a non-uncommon problem, but I haven't found a solution yet
>via google. I'm not against using min-width hacks for IE, but would
>prefer to not have to if there's a way.
Hi Darrel,
I don't know what the name of this IE-phenomenon is, but it's indeed a 
non-uncommon problem. IE is computing the width of a column in a % of 
(in this case) the body width. That is too much!
With an extra box inside you can set the parent width to 100%, and then 
IE is performing as it should be.
See testpages <>.


css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: