The reason could be that you have mixed px and % sizes and so the calculations
becomes difficult in browsers. However, I suggest try this:
Setup your html as follows:
<------------------------------------------------------------------------->
<body>
<div id="wrapper">
<div id="container2">
<div id="container1">
<div id="col1"><h3>Left Nav Bar</h3> <br/><br/><br/>Red 25%
<br/>Red 25% <br/>Red 25% <br/>Red 25% <br/>Red 25% <br/></div>
<div id="col2">
<div id="Row1"><h3>Header bar</h3></div>
<div id="Row2"><h3>Content</h3></div>
<div id="Row3"><h3>Footer<h3></div>
</div>
</div>
</div>
</div>
</body>
<------------------------------------------------------------------------->
Now setup your css as follows:
body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
}
#wrapper {
width: 800px;
margin: 0 auto;
text-align: left;
}
#container2 {
clear: left;
float: left;
width: 100%;
overflow: hidden;
background: yellow; /* column 2 background colour */
border: 2px black solid;
}
#container1 {
float: left;
width: 100%;
position: relative;
right: 75%;
background: red; /* column 1 background colour */
border-right: 2px black solid;
}
#col1 {
float:left;
width:21%;
position: relative;
left:77%;
overflow: hidden;
}
#col2 {
float:left;
width:71%;
position:relative;
left:81%;
overflow: hidden;
}
#Row1 {
height: 85px;
background: green;
}
#Row2 {
height: 395px;
background: yellow;
}
#Row3 {
height: 85px;
background: lime;
}
hth
--- On Sat, 19/6/10, John Dick <[email protected]> wrote:
>
> Why is right side longer than left side in this skeleton
> layout? You can see at the bottom of the webpage when
> this info is entered in a test document:
>
<!-- code below snipped and incorporated above -->
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
