PDA

View Full Version : Trying to get Centered Column two sub column layout...

Tristan Gray
07-22-2008, 08:17 PM
So I am trying to get one centered, fixed width, column layout with:

Header across total width of main column.
Menu across total width of main column.
A content column that floats left under the two aforementioned.
A side bar column that floats right beside the left content column.
A footer across the total width of main column.


I don't know where I am going wrong with this. The right column keeps getting pushed under everything else for some reason. Someone please help me. This layout should be pretty easy I thought. I have also included an image in case you cannot visualize what I am looking to do.

Here's the html, the css is attached:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Pueblito Float Test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]></script>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="logo_pueblito.gif">
</div>
<div id="menu">
<li>Home
<ul id="nav">
<li><a href="">Welcome</a></li>
<li><a href="">Latest News</a></li>

</ul>
</li>

<li>Our Programs
<ul id ="nav">
<li><a href="">Current Programs</a></li>
<li><a href="">Program Archive</a></li>

</ul>
</li>

<li>How You Can Help
<ul id="nav">
<li><a href="">Ways to Give</a></li>
<li><a href="">Volunteer in Canada</a></li>
<li><a href="">Join Us</a></li>
<li><a href="">Privacy Policy</a></li>
</ul>
</li>

<li>About Us
<ul id="nav">
<li><a href="">Philosophy</a></li>
<li><a href="">Staff & Directors</a></li>
<li><a href="">History</a></li>
<li><a href="">Newsletters</a></li>
<li><a href="">Contact Info</a></li>
</ul>
</li>

</ul>
</div>
<div id="contentleft">
<object type="application/x-shockwave-flash" data="homepg.swf" width="540" height="256">
<param name="movie" value="homepg.swf" />
<param name="wmode" value="transparent" />
</object>
</div>
<div id="contentright"><img src="bt_donate.gif"><image src="bt_village.gif">
</div>
</div>

</body>
</html>
_Aerospace_Eng_
07-22-2008, 08:40 PM
It is easy once you get the math correct. Your wrapper is only 800px wide with a border of 2px yet content left and content right combine for a total of 1044px wide. This should work
#contentright {
float: left;
border-bottom: 1px #a5a5a5 solid;
border-left: 1px #a5a5a5 solid;
border-right: 1px #a5a5a5 solid;
background-color: #ffffff;
padding: 0px;
width: 256px; /* 800px - 542px = 258px but you have a border of 2px so you can only use 256 */
min-height: 600px;
text-align: justify;}
You will need to use clear:both; on the CSS for your footer.
Tristan Gray
07-22-2008, 11:08 PM
Thanks a lot aero. It's one of those scenarios where I am doing work for a charity on the side while also working full-time so today I was already cross-eyed from spreadsheets before I even got to the site. Thanks for your help as always.