DIVs shift down when browser widow is resized to 800 wide

How do they stay in place without a fixed width?

[Cienwen]

Hello Good Webmasters!

I have a DIV question.

I have set up a layout using floated DIVs and it looks and works great.

I have three DIVs sitting in a container DIV (homeWrapper). The first DIV is a navigation column that has links and images (leftColumn). It is floated left and is the full height of the container DIV.

The second DIV (topFlash) acts as a row and slides to the top right of leftColumn. This DIV also expands as far to the right as the browser is wide, filling the screen with its repeating background. Thus, I don’t want it to have a fixed width.

The same goes with the third DIV (bottomFlash). It sits below topFlash but still to the right of leftColumn.

Everything is working great, unless I resize my browser to 800 x 600. When I do that topFlash and bottomFlash shift (jump) below leftColumn. I want them to stay where they are and allow a horizontal browser scroll bar.

I also need there not to be a fixed width on my DIVs so they will fill the page to the right on larger screen resolutions.

Here is a very abbreviated look at my code.

<style type="text/css">
#homeWrapper {
margin: 0;
height:515px;
background:#f8e600;
}

#leftColumn {
margin: 0px;
width:180px;
height:515px;
background:#f8e600;
float:left;
}

#topFlash {
margin:0;
height: 300px;
background:#f8e600 url(images/homerotate/mainFeatureTile1.jpg);

}

#bottomFlash {
margin:0;
height:215px;
background:#f8e600;
}

.homepgRed {
color: #CC3333;
font-weight: bold;
}

.hand {
cursor: pointer;
}

.homepgLinkBor {
border-bottom: 1px #000000 dotted;
}

</style>
<div id="homeWrapper">

<div id="leftColumn">[Images and Links]</div>

<div id="topFlash">[Flash content]</div>

<div id="bottomFlash">[Flash content]</div>

</div>

Does any one have any ideas? Thanks in advance!

[Demaestro]

I think without a fixed width some where then the page will always wrap like that when the screen is smaller then an element.

I know you don't want to but try this...

#homeWrapper {
width: 790px;
margin: 0;
height:515px;
background:#f8e600;
}

[edited by: Demaestro at 7:53 pm (utc) on April 8, 2009]

[Cienwen]

Yes. Adding a width does prevent the DIVs from shifting down but I need the DIV's background to fill all the way to the right, into infinity.

Any ideas?

[Demaestro]

try adding this

body {
background:#f8e600;
}

or

body {
background-color:#f8e600;
}

[edited by: Demaestro at 8:10 pm (utc) on April 8, 2009]

[swa66]

How about a min-width ? It'll only kick in at the point you set it to not let the element go too small for the content it has.

[Cienwen]

Demaestro:

Normally a solution like that might work but all of the ASP included elements get messed up.

[Cienwen]

swa66:

That's it! that's it!

That totally works.

#homeWrapper {
margin: 0;
width:100%;
min-width: 780px;
height:515px;
background:#f8e600;
}

Thank you all so much. I can finally move on to other things!

[Demaestro]

Just an FYI min-wdith is not supported by IE 6 and less, not sure if you are concerned with that though.