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

HTML & CSS
1

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.

          <div id="footer">
          <p class="footerBoxOne">1</p>
          <p class="footerBoxTwo">2</p>
          <p class="footerBoxThree">3</p>
          <p class="bottom">test</p>
        </div>

#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

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.

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

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.

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

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

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

I was wondering about that. Thank you very much for your help.