I have the header, navbar, left column, right column, content, and footer (in that order). The left column is floated left, then the right is floated right. I have no float on the middle content. Each are padded to have “padding: 10px;” but the middle does not pad on the left or right.
If you post the code (or a link to the page would be even better), we’ll have a better chance of figuring out what’s wrong than by looking at a picture…
actually I understand what he’s saying. The middle would NOT pad left and right because that’s the way floats work. your padding is actually there, but covered up by the floats. what you need to do is, whatever you would have used padding for the middle add it as margin on the OPPOSITE SIDE SIDE of the float to the floated elements.
ANOTHER WAY, if your side bar widths are fixed, is to give the middle element left/right margins = the width+padding of the sidebar + the padding desired for that side of the middle element
example:
.fl, .fr { width:150px; padding 10px} /* the computed width of the sidebar would then be 170px */
.fr {float:right}
.fl {float:left}
.middle { margin-left:180px; margin-right:180px}
You can also set overflow:hidden on your middle div and that will prevent it from sliding under the floats (it also un-collapses margins).
Then your side paddings will come into view.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Three Columns</title>
<style type="text/css">
#wrapper {
width: 80%;
min-width: 700px;
max-width: 1000px;
margin: 0 auto;
background: #BCC5E1;
border: 1px solid #000;
overflow: hidden;
}
#main {
overflow: hidden;/*stop div from sliding under floats*/
padding: 0 1em;
background: #EEF;
text-align: justify;
}
#left, #right {
float: left;
width: 160px;
padding: 0 10px;
}
#right {float: right;}
p {margin: 1em 0;}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<p>left content</p>
<p>left content</p>
<p>left content</p>
<p>left content</p>
</div>
<div id="right">
<p>right content</p>
<p>right content</p>
<p>right content</p>
<p>right content</p>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.
Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare,
felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula
ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
semper ipsum et urna. Ut consequat neque vitae felis.</p>
</div>
</div>
</body>
</html>