HTML/CSS Layout Issue

Question

Я смотрю простой макет веб-страницы, но хочу исправить 3 центрированных столбца до абсолютной максимальной высоты.

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

Это, кажется, используемый css, но я не уверен, что изменить.

.home_section_left{ 
width:270px; 
height:auto; 
float:left; 
margin:0 14px 0 14px; 
padding:0 10px 20px 10px; 
background:url(images/home_block_bg.gif) no-repeat center bottom; 
} 

Как исправить длину столбцов независимо от длины введенных данных/текста?

Answer 1

Вы можете добавить max-height и overflow: auto; в тег, которые вы хотите, чтобы ограничить высоту примерно так:

.home_section_left { 
    max-height: 300px; 
    overflow: auto; 
} 

Это будет ограничивать высоту DIV и применить скроллбары к нему при необходимости

Answer 2

Надеется, что это будет помощь по мере необходимости,

.home_section_left 
{ 
width: 270px; 
height: 200px; 
float: left; 
margin: 0 14px 0 14px; 
padding: 0 10px 20px 10px; 
overflow: hidden; 
background: url(images/home_block_bg.gif) no-repeat center bottom; 
}