I have just put together a simple layout which should resemble something like this:
________________
| ______________|
| | | |
| | | |
| | | |
| | | |
| |___|__________|
|_______________|
My current code has a problem with the left border on the body container... it doesn't show.
I would greatly appreciate any advice pointing me towards a better approach for this type of layout... i have currently used extra DIVs within the container DIVs to avoid any problems with the width of the fluid layout, i'm not sure that this is the best way to go.
I spend most of my time working with Server Side Scripting so my Client Side knowledge is not quite up to scratch.
Current HTML/CSS below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body,div {
margin: 0;
font: 10px Verdana;
}
#header {
width: 100%;
height: 30px;
background-color: #B2BABF;
font-weight: bold;
}
#main {
border-left: 20px solid #B2BABF;
}
#left {
float: left;
width: 20%;
background-color: #EEE;
}
#right {
float: left;
width: 80%;
background-color: #DDD;
}
#footer {
clear: both;
width: 100%;
height: 30px;
background-color: #B2BABF;
}
.content {
padding: 10px;
}
</style>
</head>
<body>
<div id="header">
<div class="content">Header</di
v>
</div>
<div id="main">
<div id="left">
<div class="content">
left<br>
left<br>
left<br>
left<br>
</div>
</div>
<div id="right">
<div class="content">
right<br>
right<br>
right<br>
right<br>
</div>
</div>
</div>
<div id="footer">
<div class="content">footer</di
v>
</div>
</body>
</html>
Thank you,
Diablo84
Start Free Trial
