Erstellen einer multi-Spalte wie Fußzeile in html5-css3

Hier ist die Struktur ähnlich zu dem, was Sie wollen.. immer Noch nicht genau sicher, was Sie suchen wenn. Oder was die Frage ist wirklich..

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 BASIEREND AUF DEN EDIT:

Ist die erste Sache, die ich tun würde, ändern Sie Ihre Polsterung. Und die zweite Sache, die ich versuchen würde, ist floating die Spalten von Links... Zum Beispiel....

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;
}

Auch nicht unbedingt geleert werden, wenn alle Spalten haben eine Feste gleich der Breite (was Sie sollte) zu Folgen, die design - /UX-Prinzip der Verwendung eines Rasters. Für meine neue Geige Beispiel habe ich Feste pixel-breiten. Allerdings, wenn Sie zum erstellen eines fluid-layout, das Sie verwenden könnte, Prozentsätze durch die Berechnung der inneren Breite (ohne Polsterung) und Division durch drei. Wie für die Fußzeile kann es nur float left mit einer Breite von 100%;

Andere Sache im Auge zu behalten ist, dass, wenn Ihr alle Spalten haben die gleiche Breite und Polsterung, die Sie nicht brauchen, um ID ' s für jeden container. Sie können mit einer Klasse, wie in meinem Beispiel oben.

HIER IST MEINE NEUE GEIGE:
http://jsfiddle.net/krishollenbeck/Kkr83/1/

Verwenden Sie clear: both , float:left, und float:right .

Hier ist der code:

Für 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>

Nun, hier geht die 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;
}