Плавающие divs и выравнивание вправо

Question

Я действительно извиняюсь, если этот вопрос уже был дан в другом месте на веб-сайте. Я довольно новичок в html & css, и я постоянно застреваю в том же месте, плавающие divs.

Я пытаюсь плавать три div рядом друг с другом. Однако, как вы могли заметить в моем jsfiddle, правый div не совпадает с другими элементами выше и ниже.

Проблема с шириной, заполнением, полями ...?

http://jsfiddle.net/_karima/aWaT2/

CSS

#article { 
    overflow:auto; 
    } 

    #left-column { 
    background: yellow; 
    width:19%; 
    height: 100px; 
    } 

    #main { 
    background: yellow; 
    width:39%; 
    height: 300px; 
    } 


    #right-column { 
    background: blue; 
    width: 29%; 
    height: 150px; 

    } 
    #left-column, #main, #right-column {  
    float: left; 
    margin: 1%; 
    padding: 7px; 
    } 

HTML

<div id="article"> 
<div id="left-column"> left-column</div> 
<div id= "main">main</div> 
<div id="right-column"> right column</div> 
</div> 

Answer 1

Попробуйте использовать свойство

Свойство коробчатых размеров позволяет определить некоторые элементы, чтобы соответствовать площадям коробчатых размеров определенным образом

узнать об этом here

Проверьте это fiddle

#left-column, #main, #right-column { 
    float: left; 
    margin: 1%; 
    padding: 7px; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; /* Firefox */  
}