Question

Coding a web page and ran into trouble with a combination of the HTML and CSS. I want to create the same existing 3 column layout I have now in the footer. When I copy/paste and rename the HTML/CSS into the footer, the code does not function as columns. How can I add a second 3 column layout to the footer that will function the same way my first 3 column layout does?

here is the problem html/CSS

<div id="columns">

<div class="left column">
    <p>left column</p>
</div>

<div class="middle column">
    <p>middle column.</p>
</div>    

<div class="right column">
   <p>right column.</p>
</div>
</div>

<div class="footer">
  <!-- 3 column layout would be placed inside the footer -->

 #columns {
width: 960px;
padding-top: 50px;
margin-bottom: 0px;
}


#columns .column {
    position: relative;
    width: 300px;
    padding: 1%;
    border: solid 1px #000;
}

#columns .left {
    float: left;
}

#columns .middle {
    float: left;
}
#columns .right {
    float: right;
    #container #col1 {
    width: 320px;
    float: left;

 } 

Answer 1

I floated everything left and made sure the footer and columns had enough width to sit next to each other and it appears to do what you want it to:

#columns {
padding-top: 50px;
margin-bottom: 0px;
width:1200px;
}
.column {
position: relative;
width: 300px;
padding: 1%;
border: solid 1px #000;
}
.column{float:left;}
.footer{width:1200px;}

​

http://jsfiddle.net/trG5B/