...

View Full Version : Keeping two div's side by side when resizing page?



ngmhtml
05-07-2006, 07:57 PM
I have a page layed out in two CSS styled divisions, a narrow one (110px wide) on the left that serves as a navbar and a larger content division (690px) adjacent to the right of it. The page functionality and appearance is fine in both Firefox and IE 6, however when the browser window is resized to be narrower than the combined width of these divisions ~(800px) the right div repositions underneath the navbar. Obviously the desired result here is to have the right side division stay put and for the browser to activate horizontal scrolling.

Here's the relevant source (simplified):


<head>
<style type="text/css" media="screen"><!--
.navboxcont { position:relative; float:left; width:auto}
.navboxleft { position:relative; float:left; width:110px; top:89px}
.navboxauto { position:relative; float:left; right:0px; margin-left:0px}
img { vertical-align: bottom; margin-left: 0}
--></style>
</head>
<body>
<div class="navboxcont">
<div class="navboxleft">
my navbar is here
</div>
<div class="navboxauto">
my right side content is here
</div>
</div>
</body>

jonnybinthemix
05-07-2006, 08:33 PM
<head>
<style type="text/css" media="screen">
#navboxcont {
float:left;
width:800px;
}
#navboxleft {
float:left;
width:110px;
}
#navboxauto {
position: absolute;
left: 120px;
width: 690px;
float:right;
margin-left: 1px;


}

img { vertical-align: bottom; margin-left: 0}

</style>
</head>
<body>
<div id"navboxcont">
<div id="navboxleft">
my navbar is here
</div>
<div id="navboxauto">
my right side content is here
</div>
</div>
</body>

try that mate.

Jon

ngmhtml
05-08-2006, 03:35 AM
Thanks, Jon!

Works great now!, I see the key was to set the total table width to a fixed value (800px in this case). I guess that would make sense.

-Nathan



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum