Невозможно поместить теги div div в нужные места

Question

У меня есть 5 <div> теги на моей странице.

1. контейнер <div>
2. заголовка <div>
3. левая панель <div>
4. средняя панель <div>
5. правая панель <div>

Левая панель, средняя панель и правая панель <div> размещены сторона by sid используя CSS float left. Теперь проблема возникает, когда извлеченные данные отображаются на средней панели <div>, и ее высота начинает увеличиваться в соответствии с количеством выбранных данных. Левая панель <div> остается там, где она должна быть, но правая панель <div> изменяет свою маржу, как показано на рисунке.

Это изображение объясняет точную ситуацию. Ниже мой CSS.

*{ 
margin:0; 
padding:0; 
font-family:Arial, Helvetica, sans-serif; 
} 

.container{ 
    margin:0 auto; 
    padding:0; 
} 

.header{ 
    height:100px; 
    width:100%; 
} 

.left_panel{ 
    width:130px; 
    float:left; 
} 


.middle_panel{ 
    width:70%; 
    float:left; 
} 

.right_panel{ 
    float:right; 
    width:130px; 
} 

Пожалуйста, помогите мне с этим. Благодарю.

Answer 1

Я думаю, проблема связана с тем, что объединенная ширина левой, средней и правой панелей превышает ширину вашей страницы.

Попробуйте что-то вроде моей скрипки, где я установить ширину левых и правых панели до 15%, так что ни при каких обстоятельствах они превышают 100%

.left_panel { 
    width:15%; 
    float:left; 
    background: yellow; 
} 

.middle_panel { 
    width:70%; 
    float:left; 
    background: blue; 
} 

.right_panel { 
    float:right; 
    width:15%; 
    background: pink; 
} 

http://jsfiddle.net/WPgt9/

Answer 2

Надеется, что это помогает

HTML

<div class="container"> 
    <div class="header">Header</div> 
    <div class="left_panel">Left</div> 
    <div class="middle_panel"> 
     Middle 
      </div> 
    <div class="right_panel">Right</div> 
</div> 

CSS

*{ 
margin:0; 
padding:0; 
font-family:Arial, Helvetica, sans-serif; 
} 

.container{ 
    margin:0 auto; 
    padding:0; 

} 

.header{ 
    height:100px; 
    width:100%; 
    background-color:green; 
} 

.left_panel{ 
    width:15%; 
    float:left; 
    background-color:red; 
    height:400px; 
} 


.middle_panel{ 
    width:70%; 
    float:left; 
    background-color:blue; 
    height:500px; 
} 

.right_panel{ 
    float:right; 
    width:15%; 
    background-color:red; 
    height:400px; 
} 

Fiddlehttp://jsfiddle.net/WPgt9/9/