Hi,
As you have a fixed pixel width you should be using pixels and not percentages because percentages will always be out.
I think this is what you were trying to do.
Code:
<!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=iso-8859-1" />
<title>test layout3</title>
<style type="text/css">
* {margin:0;padding:0; border:0;}
p,h1,h2{padding:5px;margin-bottom:1em; margin-left:0.5em;}
h2{font-size:98%}
h3 { font: 12px Georgia, "Times New Roman", Times, serif; padding:2px 3px; margin: 0; color: #ff0000;}
body{
text-align:center;
margin:auto;
background:#FFF url(http://www.layout3.upfrontec.com/images/bg5.png) no-repeat;
color:#F0F0EE;
width:770px;
text-align: left;
font-family: Arial, Tahoma, sans-serif;
font-size:12px;
}
#wrapper{
margin:21px 0;
background:#626D75;/* right column colour*/
text-align:left;
border:5px #F2F2F2 solid;
min-height:0;
}
#header,#footer{
background:#999;
color:#000;
/*width:100%;*/
clear:both;
}
#header{border-bottom:1px solid #FFF; background:url(http://www.layout3.upfrontec.com/images/u_header.jpg) no-repeat; height:114px;}
#footer{border-top:1px solid #FFF; overflow:hidden; padding:4px;}
#footer a{color:#FFF;}
#breadcrumb{ background:#999; color:#FFF; padding:4px; border-bottom:1px solid #FFF;}
#inner{
margin-right:167px;
background:#EBEBEB;
border-right:1px solid #fff;
}
#middle{
background:#AEE758;
margin-left:415px;
color:#000;
position:relative;
border-left:1px solid #FFF;
}
#content2{
position:relative;
width:100%;
float:left;/* contain clearing*/
}
#left{
width:415px;
margin-left:-414px;/*overlap for old mozilla*/
position:relative;
left:-2px;/* now line it up*/
float:left;
color:#000;
}
#right{
width:167px;
margin-right:-166px;/*overlap for old mozilla*/
position:relative;
left:2px;/* now line it up*/
float:right;
}
#left{margin-right:-3px;}/* 3 pixel jog*/
#right{margin-left:-1px;}/* */
/* clear without structural mark-up */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* mac hide \*/
.clearfix {display: block;}
/* End hide */
/*menu*/
#contentMenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 167px;
margin: 0;
}
#contentMenu h1 {
display: block;
background-color:#FF9900;
font-size: 90%;
padding: 3px 0 5px 5px;
color: #333333;
margin: 0px;
width:162px;
}
#contentMenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#contentMenu ul li {
margin: 0px;
padding: 0px;
}
#contentMenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 2px 2px 5px;
text-decoration: none;
color: #aee758;
width:160px;
}
#contentMenu ul li a:hover, #contentMenu ul li a:focus {
font-weight:bold;
color: #ff9900;
background-color: #aee758;
}
/*Start breadCrumb */
#breadcrumb {
height: 18px;
font-size:12px;
padding: 2px;
background: #999;
color: #f5f5f5;
}
#breadcrumb li {
float: left;
display: inline;
margin-right: 4px;
}
#breadcrumb a {
color: #fff; /* Our breadcrumb links are going to be white */
font-weight: bold; /* And bold */
background: url(http://www.layout3.upfrontec.com/../images/Ysq_icon.png) bottom right no-repeat;
padding-right: 11px; /* We need to add some padding to the right of the link. This space is where the background image is going to be shown. */
text-decoration: none;
}
#breadcrumb a:hover {
color: #333;
background: url(http://www.layout3.upfrontec.com/../images/Bsq_icon.png) top right no-repeat;
}
/*E O breadCrumb*/
</style>
<!--[if IE ]>
<style type="text/css">
* html #wrapper{height:1%}
* html .clearfix,* html #inner, * html #middle {height: 1%;}
#inner, #middle{min-height:1px}
</style>
<![endif]-->
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body>
<div id="wrapper">
<div id="header"> </div>
<!-- end #header-->
<!--<div id="breadcrumb">-->
<ul id="breadcrumb">
<li><a href="#">Home</a></li>
</ul>
<!--</div>-->
<!-- end #breadcrumb-->
<div id="inner">
<div id="middle" class="clearfix">
<div id="content">
<div id="left">
<p> Ut mauris velit, convallis vel, sodales ut, viverra at, nulla. Maecenas dignissim, nulla ut ultricies dignissim, leo risus tempus odio, et dignissim ligula est at elit. Cras ac dolor in neque volutpat iaculis. Suspendisse nunc neque, blandit sit amet, convallis vitae, venenatis et, nisl. Cras lacinia. Maecenas eget sem at mi porta venenatis. Phasellus ac massa. Nunc tempor. Maecenas nunc leo, consectetuer ut, euismod eu, ultrices vitae, elit. Nunc auctor dignissim enim. Cras pretium erat condimentum est. Phasellus non massa luctus mi pretium ullamcorper. Sed ultricies. In id mauris. Duis mollis, nibh a sodales malesuada, ante ipsum tristique lacus, et tristique wisi magna quis dolor. Morbi volutpat sem in tellus. Nunc lacinia velit quis lectus. </p>
</div>
<div id="right" class="column">
<div id="contentMenu"><h1>Navigation</h1>
<ul>
<li><a href="#" tabindex="1">menu1</a></li>
<li><a href="#" tabindex="2">menu2</a></li>
<li><a href="#" tabindex="3">menu3</a></li>
<li><a href="#" tabindex="4">menu4</a></li>
<li><a href="#" tabindex="5">menu5</a></li>
<li><a href="#" tabindex="6">menu6</a></li>
</ul>
</div>
</div>
<div id="content2" class="column">
<h3>W3C Standards?<span> </span></h3>
<p>The Web Standards Group is for web designers & developers who are interested in web standards (HTML, XHTML, XML, CSS, XSLT etc.) and best practices (accessible sites using valid and semantically correct code)... </p>
</div>
</div>
<!-- end #content-->
</div>
<!-- end #middle-->
</div>
<!-- end #inner-->
<div id="footer"> Footer </div>
<!-- end #footer-->
</div>
<!-- end #wrapper-->
</body>
</html>
Posting Permissions
Bookmarks