Forum Moderators: not2easy
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
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" />
Thanks,
Derek Basch
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
