SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Oct 2005
    Location
    Home
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with padding

    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?

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    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...

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •