Welcome to WebmasterWorld Guest from 54.205.251.179

Forum Moderators: not2easy

Message Too Old, No Replies

DIVs shift down when browser widow is resized to 800 wide

How do they stay in place without a fixed width?

   
7:32 pm on Apr 8, 2009 (gmt 0)

5+ Year Member



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!

7:47 pm on Apr 8, 2009 (gmt 0)

WebmasterWorld Senior Member demaestro is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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]

8:00 pm on Apr 8, 2009 (gmt 0)

5+ Year Member



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?

8:09 pm on Apr 8, 2009 (gmt 0)

WebmasterWorld Senior Member demaestro is a WebmasterWorld Top Contributor of All Time 10+ Year Member



try adding this

body {
background:#f8e600;
}

or

body {
background-color:#f8e600;
}

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

8:24 pm on Apr 8, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
8:34 pm on Apr 8, 2009 (gmt 0)

5+ Year Member



Demaestro:

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

8:38 pm on Apr 8, 2009 (gmt 0)

5+ Year Member



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!

8:44 pm on Apr 8, 2009 (gmt 0)

WebmasterWorld Senior Member demaestro is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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