Hello, so this is a problem I have every time I do this type of CSS layout. I know I could just download a pre-designed layout and avoid this problem all together, but I would rather know what the solution is.

So i have a header, left navigation, and right content area basic layout. I have the left navigation and right content area inside of a container div, with a 20px right hand margin on the left hand navigation.

The layout is fine until I add a border around the left navigation, and right content area. When I add the border, the right content area appears below the left navigation. I have put together 2 examples to show my problem. I'm thinking its one small dumb little tag im missing to make this all work.


Example With NO Border (Works Perfect)
http://itsnetservices.com/andy/index2.html

CSS Code

body {
background-color : #f2f2f2;
}
.table {
border-width : 1px 1px 1px 1px;
border-spacing : 0;
border-style : solid solid solid solid;
border-color : #646464 #646464 #646464 #646464;
background-color : #ffffff;
}
a:link, a:visited {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
color : #000000;
text-decoration : none;
}
a:hover {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
color : #000000;
text-decoration : none;
}
.header {
background-image : url(images/bg_header.jpg);
background-repeat : no-repeat;
width : 860px;
height : 115px;
margin-left : auto;
margin-right : auto;
margin-bottom : 20px;
}
.container {
width : 860px;
margin-left : auto;
margin-right : auto;
}
.navigation {
width : 177px;
margin-left : 0;
margin-right : 20px;
float : left;
background-color : #ffffff;
}
.content {
width : 663px;
margin-left : 0;
margin-right : 0;
float : left;
background-color : #ffffff;
}

Example With A Border (Falls Apart)
http://itsnetservices.com/andy/index3.html

CSS Code

body {
background-color : #f2f2f2;
}
.table {
border-width : 1px 1px 1px 1px;
border-spacing : 0;
border-style : solid solid solid solid;
border-color : #646464 #646464 #646464 #646464;
background-color : #ffffff;
}
a:link, a:visited {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
color : #000000;
text-decoration : none;
}
a:hover {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
color : #000000;
text-decoration : none;
}
.header {
background-image : url(images/bg_header.jpg);
background-repeat : no-repeat;
width : 860px;
height : 115px;
margin-left : auto;
margin-right : auto;
margin-bottom : 20px;
}
.container {
width : 860px;
margin-left : auto;
margin-right : auto;
}
.navigation {
width : 177px;
margin-left : 0;
margin-right : 20px;
float : left;
background-color : #ffffff;
border-width : 1px;
border-style : solid;
border-color : #646464;
}
.content {
width : 663px;
margin-left : 0;
margin-right : 0;
float : left;
background-color : #ffffff;
border-width : 1px;
border-style : solid;
border-color : #646464;
}

Thanks in advance.
-Adam

It's a matter of spacing. When I changed the navigation margin to 16px it stayed aligned. Remember that the border is counted in the overall width.

Beat me to it Jeremy. Yeah I am guessing the 1px border is accounting for 4 of the 20 px, so when you set the margin to 20px, it makes the content section go 4px too far to the right, which would make it overlap the side of the container section, so it just moves the whole thing to the next line.

Here's what I changed:

.navigation {
width : 177px;
margin-left : 0;
margin-right : 0;
float : left;
background-color : #ffffff;
border: 1px solid #646464;
}
.content {
width : 663px;
margin-left : 16px;
margin-right : 0;
float : left;
background-color : #ffffff;
border: 1px solid #646464;
}

Yup, you guys are both right. I knew it was something small and dumb. I actually figured it out a little after I posted. Well I fixed it at least. I still wasn't sure what the problem was, but now that you told me, it was so obvious.

Another PEBKAC error I believe.

Thanks for the help guys.

When I add the border, the right content area appears below the left navigation

Classic float drop problem, and I see you've gotten the answers you needed to fix it. You should review the box model, especially the way IE 6 and below does NOT follow the standards.

LOL your error message -- when I worked on the helpdesk, we used to call it the 'chair to keyboard interface problem'

Hehe. Ya we all hate the IE6 don't we?

I always forget that the borders get applied on the outside of the box, rather than the inside. Too much dam time in front of photoshop and placing my borders on the inside has me thinking the same way.

A partner of mine used to work at Earthlink as a tech, and when he would get calls from people who were doing something totally stupid, he would tell them its a common id10t (aka Idiot) error. Haha.

Here are another couple funny error messages for you guys to hopefully get a laugh out of.

the borders are adding extra width to the divs, 1 pixel each. Removing 2 pixels from the width of each div (content and navigation) will solve your problem. In the future, I recommend leaving a little extra space and floating one of them left, and the other right. Using up all of the available space is just asking for trouble when floating divs, especially with IE6.