homepage Welcome to WebmasterWorld Guest from 54.226.80.196
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Nested DIV's and degradation.
dbasch




msg:1212058
 7:58 pm on Feb 6, 2003 (gmt 0)

I have been experimenting with nested DIV's and had a question that I hope someone can answer for me. Here is the code before I start:

CSS:

#header {
background-color: white;
border: 2px solid green;
width: 100%;
height:108px;}

#headerLeft {
width: 230px;
color: white;
float: left;
border: 1px solid yellow;
}

#headerRight {
background: red;
height:94px;
color: white;
float: left;
right: 10px;
width: 400px;
}

#headerQuickLinks {
background: #999999;
height:19px;
margin-left:0px;
color: white;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type="text/css" media="all">
@import url(tester.css);
</style>
</head>
<body>
<div id="header">
<div id="headerLeft"><img src="images/logo.gif" alt="#" width="230" height="124" /></img>
</div>
<div id="headerRight">Pictures and stuff
<div id="headerQuickLinks">These will be the quick Links.
</div>
</div>
</div>
</body>
</html>

This renders as I would expect it to. What I dont understand is that if I reduce the width of the browser window the "headerRight" DIV jumps below the "headerLeft" DIV. The only way I have found to stop this behavior is to absolutely position the "headerLeft" DIV. Is there another way? It makes sense to me that the "headerLeft" DIV would attempt to degrade gracefully but I still wanted to see how everyone else deals with this. Well, thanks again and webmasterworld.com rules!
Cheers,
Derek Basch

 

madcat




msg:1212059
 8:09 pm on Feb 6, 2003 (gmt 0)

hey dbasch

Which screen resolutions are you testing this on? >> I don't immediately see the problem.

Remember that that an image tag doesn't need the closing </img>:

<img src="images/logo.gif" alt="#" width="230" height="124" />

dbasch




msg:1212060
 9:38 pm on Feb 6, 2003 (gmt 0)

It should do it at any resolution. All you have to do is use IE or Netscape and horizontally resize the window to be smaller. The red box will (degrade) jump below the yellow bordered box.

Thanks,
Derek Basch

SuzyUK




msg:1212061
 11:42 pm on Feb 6, 2003 (gmt 0)

dbasch

the "problem" (although it's up to you wether it actually a problem as it's degrading nicely IMHO) is here:
#header {
background-color: white;
border: 2px solid green;
width: 100%;
height:108px;}

you're telling the header to be 100% wide, that's 100% of the window regardless of what size the browser window is at..so the divs are wrapping to fit in with this instruction

if you don't want your header to degrade in this way you should change the 100% to an absolute width i.e 780px or whatever your preference is..this way it won't "break" on browser resize

Suzy

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