homepage Welcome to WebmasterWorld Guest from 54.196.62.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
DIVs shift down when browser widow is resized to 800 wide
How do they stay in place without a fixed width?
Cienwen

5+ Year Member



 
Msg#: 3888343 posted 7:32 pm on Apr 8, 2009 (gmt 0)

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

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



 
Msg#: 3888343 posted 7:47 pm on Apr 8, 2009 (gmt 0)

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

5+ Year Member



 
Msg#: 3888343 posted 8:00 pm on Apr 8, 2009 (gmt 0)

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

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



 
Msg#: 3888343 posted 8:09 pm on Apr 8, 2009 (gmt 0)

try adding this

body {
background:#f8e600;
}

or

body {
background-color:#f8e600;
}

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

swa66

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



 
Msg#: 3888343 posted 8:24 pm on Apr 8, 2009 (gmt 0)

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

5+ Year Member



 
Msg#: 3888343 posted 8:34 pm on Apr 8, 2009 (gmt 0)

Demaestro:

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

Cienwen

5+ Year Member



 
Msg#: 3888343 posted 8:38 pm on Apr 8, 2009 (gmt 0)

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

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



 
Msg#: 3888343 posted 8:44 pm on Apr 8, 2009 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved