Help with padding

**Sam Rusch** · Apr 11, 2011 14:14

I have this design I just put together, and being my first CSS based design, I am not sure why this is happening.

I have some general knowledge of some tags that can be used to style a page by CSS.

Here is the example picture: ImageShack® - Online Photo and Video Hosting

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.

Any ideas?

**Stevie D** · Apr 11, 2011 15:06

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...

**dresden_phoenix** · Apr 11, 2011 19:13

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.

.middle{}
.fr,.fl {padding:10px;}
.fr{float:right; margin-left:10px;}
.fl{float:left; margin-right:10px;}

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}

hope that helps

**Rayzur** · Apr 11, 2011 20:00

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.

Code HTML4Strict:

<!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>

User Tag List

Thread: Help with padding

Thread Tools

Display

Help with padding

Bookmarks

Bookmarks

Posting Permissions