HTML / CSS Layout Issue

I'm looking at a simple web page layout but I want to fix the 3 centred columns to an absolute maximum height.

I've created this FIDDLE, which is missing the images, but as you can see the first column is longer than the others as there more text in it.

This appears to be the css that is being used, but I'm not sure what to change.

.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;
}

How do I fix the length of the columns regardless of the length of data/text entered ?

Answers


You can add a max-height and overflow: auto; to the tags you want to limit the height like this:

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

This will limit the div height and apply scrollbars to it when necessary


Hope this will help as your needs,

.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;
}

Need Your Help

Reference BOOL of Different View Controller

ios objective-c if-statement boolean viewcontroller

In my project, I've declared a BOOL *isOn in my FirstViewController. In FirstViewController, I have two buttons where pressing buttonOne, sets isOn to YES, and buttonTwo sets isOn to NO. In my

Can an app force the device to sleep?

iphone

Is there anyway to put the iPhone into sleep mode from an app?