Here is what I did and recommend. Instead of trying to go with the "inner" div's I went back to a more traditional approach. I also removed the float left from the center div because you want it to stay centered.
Next, I removed the 70% width from the center div. You will probably have problems later if you do not. When you float the sides or anything else like an image it floats inside the container it is in. So really the center div can be seen as wide as the whole, or you can use the container div for this. I am thinking you have more html just as you had more css. Anyway what you want to do is to have a margin on the right and left of the container or center div, whatever the containing tag is so that material in the center does not extend into the div's and the right/left and those can float up beside.
Also, you have to put the containing one below the floated tags or they won't locate right. To see this in action, move the center div up between the two side div's and the right one will drop down below the center.
I did not do it here but you need to remove the "center" text align (text-align: center
from your body css. Otherwise every line of text will be centered through your page. It is better to center those fewer things you want centered.
[EDIT NOTE: I forgot to add back in the right and left borders but I tried and they work OK. Just add them to the left right and center div's.]
Here is the changed code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="NoteTab Pro" />
<title>*** Your Title Here ***</title>
<style type="text/css">
<!--
body {
background-image: url(images/bckgrnd.png);
background-repeat: no-repeat;
margin: 0;
padding: 0;
text-align: center;
}
.container {
background-color: #000;
width: 80%;
margin: 0 auto;
padding: 0px;
text-align: left;
}
#header {
vertical-align: top;
width: 100%;
}
.container #header h1 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-style: italic;
color: #666;
text-decoration: underline;
position: absolute;
text-align: right;
top: 61px;
right: 196px;
}
#tvh {
right: 136px;
position: absolute;
top: 158px;
}
.container #MainContent {
background-image: url(images/headerbck.png);
background-repeat: repeat-x;
height: 150px;
width: 100%;
float: left;
border-top-width: medium;
border-top-style: solid;
border-top-color: #7373F7;
}
#left, #right{
width:15%;
background-color:#CC3300;
border-top: #7373F7 medium solid;
border-bottom: #7373F7 medium solid;
}
#center{
margin-left: 15%;
margin-right: 15%;
background-color:#333300;
border-top: #7373F7 medium solid;
border-bottom: #7373F7 medium solid;
}
#left{
float:left;
}
#right{
float:right;
}
-->
</style>
</head>
<body>
<div id="left">
<p>Left Column</p>
</div>
<div id="right">
<p>Right Column</p>
</div>
<div id="center">
<p>Center Area</p>
</div>
</body>
</html>
Subscribe to RSS
CSS Border Problem
Linear Mode
