I agree with ukgeoff-->
On two counts:
1. That "adding padding-left: 188px to your center-panel" was disastrous.
2. " #body-layout{width: 995px; " is just far to wide for a fixed width.
But then the issue is not the fixed width or design/layout, so much as how to get the page layout to work under code modification constraints.
Few other tips/comments
A. -Allways use a "Doc type"
B. -"Validation" is your (debugging) friend
C. -Never use "position:absolute"
D. -"z index" is (IMO) all but useless
E. -Don't put titles on div's p)
F. -keep track of your div closings with comments
Copy off the code I posted and take a look
(not to close, it was just a 'quicky")
The basic trick was this...
1) float the center panel left as well.
(so that the right panel has no issues and then you don't have to mess around with the order that the div's appear in the
HTML, as was suggested in an earlier reply.
2) give the center panel a left margin slightly more than the left panel's width.
(and add a stated width so the center stays inside the right panel's, left margin.)
You could maybe get away with
3) either add a 'claering div" or style the "copywrite div with " {clear:both;} "
You had some
Html errors that needed fixing, and the closing order of your div's was a little off as well.
Aside from that you were just about there.
ifunky2
<pre>
<!DOCTYPE
html PUBLIC "-//
W3C//
DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.
dtd">
<
html xmlns="
http://www.w3.org/1999/
xhtml">
<head>
<title>Experiment in "Left Floated Nav's".</title>
<link href="styles/layout.
css" rel="stylesheet" type="text/
css"/>
<meta
http-equiv="Content-Type" content="text/
html;charset=utf-8" />
</head>
<body>
<div id="body-layout">
<div id="header-layout"><h3>Header</h3></div>
<div id="middle-layout">
<div id="content-layout">
<div class="droplet" id="droplet-feature-search">
<div class="box"><h3>Search Panel</h3></div>
</div><!-- / middle-layout -->
<div id="content">
<div id="left-panel">
<h3>Left Panel</h3>
<p>Fusce nisl eros, sagittis at, ullamcorper quis, dictum ac, nulla. Vivamus id ipsum. Integer iaculis. Aliquam.</p>
<ul>
<li>ellentesque nec nibh.</li>
<li>Suspendisse fermentum</li>
<li>adipiscing nibh.</li>
<li>Maecenas scelerisque</li>
<li>mattis ante.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ante lectus</p>
</div><!-- / left-panel -->
<div id="centre-panel">
<h3>Centre Panel</h3>
<p>Praesent ligula nisl, dapibus at, sollicitudin sit amet, ullamcorper at, erat. Nullam rutrum odio eget arcu. Praesent eros arcu, ultricies eleifend,</p> <p>adipiscing in, dictum et, arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec leo velit, egestas vel, mattis eget, laoreet eu, tellus. Vivamus luctus bibendum libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra,</p> <p>Donec gravida elit a sem. Sed quis eros non odio ultricies consequat. Duis ut erat. Cras vel nibh et arcu eleifend dapibus. Aenean sed tellus.</p>
</div>
<div id="right-panel">
<h3>Right Panel</h3>
<p>Fusce nisl eros, sagittis at, ullamcorper quis, dictum ac, nulla. Vivamus id ipsum. Integer iaculis. Aliquam viverra justo at lobortis elementum</p> <p>massa eros consequat tellus, vitae tristique orci ligula at nulla.</p>
<ul>
<li>ellentesque nec nibh.</li>
<li>Suspendisse fermentum</li>
<li>adipiscing nibh.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ante lectus</p>
</div><!-- / right-panel -->
</div><!-- / content -->
</div><!-- / content-layout -->
<div id="copyright"><a href="
http://www.google.com" target="_blank" title="© 2004 - 2006 Some Company">© 2004 - 2006 Some Company</a>
</div>
</div><!-- / middle-layout -->
</div><!-- / body-layout -->
</body>
</
html>
</pre>
#########
and the style ---->
#########
*{
margin:0;
padding:0;
}
body{
text-align:center;
font-family:verdana, arial, sans-serif;
}
#body-layout {
width: 860px;
background-color: white;
border: 1px solid black;
margin-top:26px;
margin-bottom:0;
margin-right:auto;
margin-left:auto;
text-align:left;
}
#header-layout {
border:solid red 1px;
height: 116px;
background:#f0f0f0;
}
#content {
border:solid red 12px;
}
#content-layout {
border:solid red 1px;
}
#content-layout:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#droplet-feature-search .box {
width: 826px;
border: none;
background-color: #d3d3d3;
border:solid blue 1px;
}
#left-panel {
float: left;
padding: 0;
margin: 0 0 0 8px;
width: 160px;
background-color: #feffd9;
border:solid red 1px;
}
#centre-panel {
float:left;
width:470px;
margin: 50px 0 0 12px;
background-color: silver;
border:solid green 1px;
}
#right-panel {
float: right;
width: 160px;
border: 1px solid black;
}
#copyright {
clear:both;
text-align: center;
border: 1px solid black;
}
########