Welcome to WebmasterWorld Guest from 54.160.131.144

Forum Moderators: not2easy

Message Too Old, No Replies

Nested DIV's and degradation.

     

dbasch

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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

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

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



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