Почему div в div

Question

Я пытаюсь выучить HTML/CSS, пытаясь сделать простой сайт в HTML/CSS. Я до сих пор строю некоторый базовый скелет, но есть что-то, что я не могу решить.

У меня возникла проблема, когда div-файл div, sidebar1, sidebar2 помещается внутри нижнего колонтитула div, но я хочу, чтобы список статей div, sidebar1, sidebar2 был снаружи.

Вот соответствующий код: HTML:

 <!-- article listing --> 
     <div class="articlelisting"> 
      articlelisting 
     </div> 

     <!-- sidebar 1 --> 
     <div class="sidebar1"> 
      sidebar1 
     </div> 

     <!-- sidebar 2 --> 
     <div class="sidebar2"> 
      sidebar2 
     </div> 

     <!-- footer --> 
     <div class="footer"> 
      footer 
     </div> 

CSS:

.articlelisting { 
display: inline; 
width: 48%; 
float: left; 
} 

.sidebar1 { 
display: inline; 
width: 24%; 
float: right; 
} 

.sidebar2 { 
display: inline; 
margin-right: 15px; 
width: 24%; 
float: right; 
} 

.footer { 
width: 100%; 
border: solid 1px red; 
} 

EDIT: Я поместил articlelisting DIV. Извините, я пропустил это.

Мой вопрос в том, почему divs articlelisting, sidebar1, sidebar2, внутри нижнего колонтитула div и как разместить их вне div footer?

Благодаря

Answer 1

Эй ясно футере, как как этот

.footer{ 
    clear:both; 
    overflow:hidden; 
     /// and write some properties as required to 
    } 

Live Demo http://tinkerbin.com/9vrEFCqo

Answer 2

Затем положить articlelisting, sidebar1, sidebar2 быть вне сноска.

и дать

.footer { 
width: 100%; 
border: solid 1px red; 
clear:both; 
} 

Answer 3

Добавить clear: both; ваш стиль колонтитула. Это гарантирует, что нижний колонтитул не останется в стороне от предыдущих разделов, которые являются float -ing.

.footer { 
    clear: both; <-- Add this 
    width: 100%; 
    border: solid 1px red; 
}​ 

Я отправил рабочий пример на jsfiddle