SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2001
    Location
    Kansas City, MO
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I style my footer so there are three box that line up side by side?

    I am trying to style my footer side by side at http://andycrofford.com/sample but I can't figure out what I am doing wrong.

    Code:
              <div id="footer">
              <p class="footerBoxOne">1</p>
              <p class="footerBoxTwo">2</p>
              <p class="footerBoxThree">3</p>
              <p class="bottom">test</p>
            </div>
    Code:
    #footer {
      border-top: 1px solid #ffffff;
      background: #999999;
    }
    
    #footer .footerBoxOne {
      width: 200px;
      height: 100px;
      margin-right: 15px;
      background: #cccccc;
    }
    
    #footer .footerBoxTwo {
      width: 200px;
      height: 100px;
      margin-right: 15px;
      background: #cccccc;
    }
    
    #footer .footerBoxThree {
      height: 100px;
      width: 200px;
      background: #cccccc;
      float: right;    
    }
    Also, how can I make the background go all the way across while keeping the content centered at 960px wide?

    Will I need to set each section at 960px wide then do a content div in addition to that?

  2. #2
    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)
    How can I style my footer so there are three box that line up side by side?
    Hi,
    You will need to float the footer elements to get them side by side. You could also get the same effect with inline-blocks.
    Also, how can I make the background go all the way across while keeping the content centered at 960px wide?
    If you want the BG color to fill the width of the viewport and the rest of your page is full width then you can nest an inner div in the footer and center it with auto margins when you set the 960px width on it.

    If I am understanding everything correctly your footer might look something like this. Keep in mind though, fixed heights are never a good idea for elements that contain fluid text. I left your heights in there just for demo purposes.

    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>Demo Layout</title>
     
    <style type="text/css">
    p {margin:0;}
     
    #footer {
        min-width:960px;
        border-top:1px solid #FFF;
        background:#999;
    }
    #inner {
        width:960px;
        margin:0 auto;
        overflow:hidden;/*contain floats*/
    }
    #footer .box-lt {
        float:left;
        width:200px;
        height:100px;
        margin-right:15px;
        background:#CCC;
    }
    #footer .box-rt {
        float:right;
        width:200px;
        height:100px;
        background:#CCC;
    }
     
    </style>
     
    </head>
    <body>
     
    <div id="footer">
        <div id="inner">
            <p class="box-lt">1</p>
            <p class="box-lt">2</p>
            <p class="box-rt">3</p>
            <p>Footer Test</p>
        </div>
    </div>
     
    </body>
    </html>

  3. #3
    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 could also achieve the same effect by setting up a UL in place of that #inner div I just used. Then the LI would replace all the <p> tags and be styled in the same manner.

    It would probably make more sense to do it like that but I'm not sure what your content actually is.

    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>Footer Test</title>
     
    <style type="text/css">
     
    #footer {
        min-width:960px;
        border-top:1px solid #FFF;
        background:#999;
    }
    #ft-list {
        width:960px;
        margin:0 auto;
        padding:0;
        list-style:none;
        overflow:hidden;/*contain floats*/
        background:red;
        text-align:center;
    }
    #ft-list li {
        float:left;
        width:180px;
        height:100px;
        margin:0 15px 0 0;
        background:#CCC;
    }
    #ft-list li.last {margin:0;}
    </style>
     
    </head>
    <body>
     
    <div id="footer">
        <ul id="ft-list">
            <li>1</li>
            <li>2</li>
            <li>Footer Test</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
     
    </body>
    </html>

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2001
    Location
    Kansas City, MO
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks you very much for your help.

    Not suprisingling it looks great in all browsers except for IE. For some reason in all versions of IE the third box in the footer is missing. Any idea if there is a fix for that?

  5. #5
    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)
    Quote Originally Posted by Andwise View Post
    Not suprisingling it looks great in all browsers except for IE. For some reason in all versions of IE the third box in the footer is missing. Any idea if there is a fix for that?
    Hi,
    That's why I used a class on the last LI to remove it's margin. No versions of IE support the pseudo :last-child property that you are using.

    The margin on the last LI is causing the float to drop out of sight.

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2001
    Location
    Kansas City, MO
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was wondering about that. Thank you very much for your help.


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
  •