Creating a multi-column like footer in html5 css3

Question

I need to create a footer with three columns. The below code gives the second image rather than the first;

<footer>
    <div id=”footer_links”> </div>
    <div id=”values”>.....</div>
    <div id=”contacts”>.....</div>
    <div id="copyright">.....</div>
</footer>

CSS code:

footer{
 height: auto;
 padding:1px 15px 1px 20px;
 clear:both;
 }
#footer_links{
float:left;
}
#values{
 float:none;
 padding:0 600px 0 0;
 text-align:justify;
 }
#contacts{
float: right;

}

#copyright{
float:none;
text-align:center;
}

How do I get my divs to line up properly instead of being offset such as in the second example?

Answer 1

Here is structure similar to what you want.. Still not exactly sure what you are looking for though. Or what the question really is..

HTML

<footer>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div id="meta-links"></div>
</footer>​

CSS

footer {
  width:100%;
  background-color:#CCC;
  min-height:100px;    
}

.column {
  width:30.5%;
  background-color:#333;
  height:100px;
  float:left;
  margin:0 10px;
}

#meta-links {
 width:100%;
 background-color:red;
 float:left;   
 height:20px;
}

FIDDLE:

http://jsfiddle.net/eYKsm/13/

​

UPDATE BASED OFF OF YOUR EDIT:

The first thing I would do is change your padding. And the second thing I would try is floating the columns left... For example....

footer {
 height: auto;
 padding:1px 15px;
 width:520px;
 }
#footer_links{
 float:left;
 width:150px;  
 border:1px solid #CCC;
 padding:10px;
}
#values {
 width:150px;        
 float:left;
 text-align:justify;
 border:1px solid #CCC;
 padding:10px;
 }
#contacts{
float: left;
width:150px; 
border:1px solid #CCC;
padding:10px;
}
#copyright{
float:left;
text-align:center;
border:1px solid #333;
width:514px;
}

Also you don't necessarily need to use clear both if all columns have a fixed equal width (which they should) to follow the design / UX principle of using a grid. For my new fiddle example I used fixed pixel widths. However if you were to create a fluid layout you could use percentages by calculating the inner width (excluding padding) and dividing it by three. As for the footer it can just float left with a width of 100%;

Another thing to keep in mind is that if your columns all have equal width and padding you don't need to use ID's for each container. You could use one class like in my example above.

HERE IS MY NEW FIDDLE: http://jsfiddle.net/krishollenbeck/Kkr83/1/ ​

Answer 2

You have to use clear: both , float:left, and float:right .

Here is the code:

For HTML

<div id = "footer">
    <div id="part1">
        <div id="col1">
            <li>a</li>
            <li>c</li>
            <li>b</li>
        </div>
        <div id="col2">
            <li>a</li>
            <li>c</li>
            <li>b</li>
        </div>
   </div>
   <div id="part2">   
        <li>a</li>
        <li>c</li>
        <li>b</li>
   </div>
</div>

Now here goes the CSS

#footer {width: 1000px; }
#part1 {
    width: 500px;
    float:left;
    clear: both;
}
#part 2 {
    float:right;
    width: 500px;
}
#col1 {
    width: 200px;
    float: left;
    clear: both;
}

#col2 {
    width: 200px;
    float: right;
}

Answer 3

You can use CSS3 Multicolumns.

div#multicolumns {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

See the link for preview and documentation.

Answer 4

You should be using a styled unordered list, not a bunch on DIVs. Semantically speaking, DIVs don't mean anything. Lists have intrinsic meaning.

<ul>
    <li><a href="...">some text</a></li>
    <li><a href="...">some more text</a></li>
    <li><a href="...">more text</a></li>
</ul>

You can set width for your UL, and float them for multiple columns. One for each column.