Quick positioning layout in CSS help

swiltch

02-20-2011, 10:41 PM

Hi guys

I'm having a bit of trouble with my css layout...

I want 3 column boxes on my page, inside my header/footer that align perfectly, a content box in the middle with 2 sidebars on either side, that is aligned with the header/footer, and doesn't move when the page is resized.

At the moment they don't line up properly, and they move when the page is resized!

Any help appreciated.

_____
_____
_ __ _
_ __ _
_____
_____

<!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=utf-8" />
<title>CSS Menu </title>
<link rel="stylesheet" type="text/css" href="WebAir.css" />
</head>
<body>

<div id="logo"
<img src="images/logo.png" alt="Our logo" />
</div>

<div id="menu_wrapper">
<ul id="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="index2.html">Flight Check</a></li>
<li><a href="index3.html">Holiday</a></li>
<li><a href="index4.html">Hotel</a></li>
<li><a href="index5.html">Car Rental</a></li>
<li><a href="index6.html">Insurance</a></a></li>
<li><a href="index7.html">Contact</a></li>
</ul>
</div>

<div id="left">
<h1>MENU left</h1>
<p>Testing box</p>
<p>Testing box</p>
</div>

<div id="content">
<h1>CONTENT</h1>
<p>Home</p>

</div>

<div id="right">
<h1>MENU right</h1>
<p>Testing box</p>
<p>Testing box</p>
<p>Testing box</p>

</div>

<div id="footer">
<p>WebAir by the Three Amigos</p>
</div>

</body>
</html>

body {
padding: 50px;
}
/* The CSS Code for the menu starts here */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}

#menu li {
float: left;
margin: 0;
}

#menu li a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
}

#menu li a:hover, #menu li.active a {
border-bottom-color: #2894d1;
color: #b7e3fa;
background: #c10e06;
border-bottom: 2px solid;
}

#menu_wrapper ul {
border-bottom-color: #348bba;
border-top-color: #3099d1;
margin-left: 12px;
border-top: 2px solid;
border-bottom: 2px solid;
background: #2885b8;
}

#menu_wrapper {
padding: 20px;
}

#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
}

#logo {
position: absolute;
top: 2px;
left: 70px;
}

#footer {
border-top: 2px solid;
border-bottom: 2px solid;
background: #2885b8;
text-align: center;
font-family: Arial, sans-serif;
margin-left: 35px;
margin-right: 16px;
padding-top:: 2px;
padding-bottom: 2px;
font-size: 13px;
height: 40px;
clear: left;
}

#footer p {
color: white;
font-weight: bold;
}

#left {
text-align: center;
width:200px;
height: 470px;
margin: 5px;
padding:0px;
margin-left: 35px;
float:left;
background-color: #0099CC;
overflow: auto;
border: 2px solid black;
}

#content {
text-align: center;
width: 350px;
height:470px;
margin: 5px;
padding:10px;
float:left;
background-color:#fff;
overflow: auto;
border: 2px solid black;
}

#right {
text-align: center;
width:200px;
height:470px;
margin: 5px;
padding:0px;
margin right: 35px;
float:left;
background-color:#FF3300;
overflow: auto;
border: 2px solid black;
}

Excavator

02-20-2011, 10:59 PM

Hello switch,
Without even looking at your site yet I can see you would benefit from using the validators. Check out the links about validation in my signature line below.

They will find little errors like this for you: <div id="logo">
<img src="images/logo.png" alt="Our logo" />
</div>

swiltch

02-20-2011, 11:02 PM

Thankyou for that, I will bookmark them.

Any tips for the 3 column layout?

Excavator

02-20-2011, 11:21 PM

Any tips for the 3 column layout?

If you put your 3 columns in a containing element with a width they won't drop when the screen narrows.
Have a look at this example - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu</title>
<style type="text/css">
body {padding: 50px;}
#logo {
position: absolute;
top: 2px;
left: 70px;
}
#menu_wrapper {padding: 20px;}
/*#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
} You do not have a #menu_wrapper div in your markup*/
/* The CSS Code for the menu starts here */
#menu_wrapper ul {
border-bottom-color: #348bba;
border-top-color: #3099d1;
margin-left: 12px;
border-top: 2px solid;
border-bottom: 2px solid;
background: #2885b8;
/*
}
#menu {
margin: 50px 0;
background: #eee;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
#menu_wrapper ul and #menu are the same ul#menu
*/
font-family: Arial, sans-serif;
font-weight: bold;
padding: 0;
list-style-type: none;
font-size: 13px;
height: 40px;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
}
#menu li a:hover, #menu li a.active {
border-bottom-color: #2894d1;
color: #b7e3fa;
background: #c10e06;
border-bottom: 2px solid;
}
#contentWrapper {
width: 815px;
margin: 0 auto;
overflow: auto;
background: #f63; /*for demo only*/
}
#left {
text-align: center;
width:200px;
height: 470px;
margin: 5px;
padding:0px;
/*margin-left: 35px;*/
float:left;
background: #0099CC;
overflow: auto;
border: 2px solid black;
}
#content {
text-align: center;
width: 350px;
height:470px;
margin: 5px;
padding:10px;
float:left;
background:#fff;
overflow: auto;
border: 2px solid black;
}
#right {
text-align: center;
width:200px;
height:470px;
margin: 5px;
padding:0px;
/*margin right: 35px; invalid*/
float:left;
background:#FF3300;
overflow: auto;
border: 2px solid black;
}
#footer {
border-top: 2px solid;
border-bottom: 2px solid;
background: #2885b8;
text-align: center;
font-family: Arial, sans-serif;
margin-left: 35px;
margin-right: 16px;
/*padding-top:: 2px; invalid*/
padding-bottom: 2px;
font-size: 13px;
height: 40px;
clear: left;
}
#footer p {
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div id="logo"> <img src="images/logo.png" alt="Our logo" /> </div>
<div id="menu_wrapper">
<ul id="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="index2.html">Flight Check</a></li>
<li><a href="index3.html">Holiday</a></li>
<li><a href="index4.html">Hotel</a></li>
<li><a href="index5.html">Car Rental</a></li>
<li><a href="index6.html">Insurance</a></li>
<li><a href="index7.html">Contact</a></li>
</ul>
</div>
<div id="contentWrapper">
<div id="left">
<h1>MENU left</h1>
<p>Testing box</p>
<p>Testing box</p>
</div>
<div id="content">
<h1>CONTENT</h1>
<p>Home</p>
</div>
<div id="right">
<h1>MENU right</h1>
<p>Testing box</p>
<p>Testing box</p>
<p>Testing box</p>
</div>
</div>
<div id="footer">
<p>WebAir by the Three Amigos</p>
</div>
</body>
</html>

Even easier would be to copy the method used in this simple 3 column layout (http://nopeople.com/CSS%20tips/simple3column/index.html).