Проблемы с колонками div

Question

Я хочу 3 колонки с одинаковой шириной.

Я сделал успешную работу с помощью divs. Я сделал 2 divs в div, затем сделал еще один div в одном из двух divs, а затем использовал css float left & справа.

, но было интересно, был ли другой способ? (нет таблиц, я пробовал делать это без таблиц) , потому что у меня были проблемы с центрированием текстов, которые были рядом с изображением

и потому, что я использовал float, белый фон исчезает в области, где были столбцы.

Может кто-нибудь помочь мне либо исправить проблемы, которые у меня есть, либо дать мне альтернативный метод.

Answer 1

На самом деле у меня нет вашего вопроса. Но я делаю решение. Вот мой демо на Fiddle:

http://jsfiddle.net/asubanovsky/8d3m9/

HTML:

<div id='parent'> 
    <div id='first'>First</div> 
    <div id='second'>Second</div> 
    <div id='third'>Third</div> 
</div> 

CSS:

#parent{ 
    width: 900px; 
    margin: 0 auto; 
} 

#first, #second, #third{ 
    width: 300px; 
    float: left; 
    color: white; 
    text-align: center; 
} 

#first{ 
    background-color: #222; 
} 

#second{ 
    background-color: #444; 
} 

#third{ 
    background-color: #666; 
} 

Answer 2

<div class="wrapper"> 
    <div class="left"></div> 
    <div class="middle"></div> 
    <div class="right"></div> 
</div> 

.wrapper { 
    margin: 0 auto; 
    width: 450px; 
} 
.left { 
    float: left; 
    width: 150px; 
    background-color: red; 
    height:200px; 
    display:inline-block; 
} 
.middle { 
    background-color: yellow; 
    height:200px; 
    width: 150px; 
    display:inline-block; 
} 
.right { 
    float: right; 
    width: 150px; 
    background-color: blue; 
    height:200px; 
    display:inline-block; 
}