I am adapting an existing global layout with
css to display a different design and positioning for a specific user. I am limited as to what I can change in the
html as this must remain a global template, although I can change whatever
css I need to obviously...
I have three div elements in the content section of my layout. The left-panel floats left, the centre-panel is in the middle and the right-panel floats right. My problem is that the right-panel will not float right properly. It is wrapping below the left and centre elements, rather than floating inline to the right as it should. I'm sure I have tackled this problem before but have just forgotten the solution.
I would appreciate any help on this. A cut down basic version of the
html is below, followed by a simplified version of one of the stylesheets:
- Code: Select all
<html>
<head>
<link type="text/css" media="screen" rel="stylesheet" href="test_files/test.css">
</head>
<body>
<div id="body-layout" title="">
<div id="header-layout" title=""><h3>Header</h3></div>
<div id="middle-layout" title="">
<div id="content-layout" title="">
<div class="droplet" id="droplet-feature-search" title="Quick Search">
<div class="box"><h3>Search Panel</h3></div>
</div>
<div id="content">
<div id="left-panel"><h3>Left Panel</h3>
<br />
<br />
<br />
<br />
<br />
</div>
<div id="centre-panel">
<h3>Centre Panel</h3>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="right-panel">
<h3>Right Panel</h3>
<img src="test_files/skyscraper.gif" class="ad-image" height="728" width="160" />
</div>
</div>
</div>
</div>
<div id="copyright"><a href="#" target="_blank" title="© 2004 - 2006 Some Company">© 2004 - 2006 Some Company</a> </div>
</div>
</body>
</html>
Stylesheet:
- Code: Select all
body {
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: silver;
}
#body-layout {
width: 995px;
border: 1px solid black;
background-color: white;
border: 1px solid black;
}
#header-layout {
height: 116px;
padding-bottom: 0;
}
#content {
margin: 0px;
width: 995px;
}
#content-layout {
padding: 0;
margin: 0;
}
#content-layout:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#droplet-feature-search .box {
position: absolute;
z-index: 99;
top: 116px;
left: 169px;
width: 826px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0;
border: none;
text-align: left;
background-color: #d3d3d3;
border: 1px solid gray;
}
#left-panel {
float: left;
padding: 0;
margin: 0 0 0 8px;
width: 160px;
background-color: #feffd9;
border: 1px solid black;
}
#centre-panel {
width: 618px;
margin: 50px 0 0 0;
padding-left: 188px;
background-color: silver;
border: 1px dashed black;
}
#right-panel {
float: right;
width: 160px;
margin: 0;
padding: 0;
border: 1px solid black;
}
#copyright {
text-align: center;
}