I'm currently working on setting up two rows of .column elements in my HTML document. Right now, I have one row of columns followed by another row in the footer.
While the first row of columns is behaving as expected, the second row aligns vertically instead of horizontally. How can I adjust the CSS to make the second row function like the first?
Here is the HTML code snippet:
<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">
<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>
And here is the corresponding CSS:
#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;
}
For a live example, check out this jsFiddle link.