HTML / CSS Layout Issue

Question

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 ?

RononDex · Accepted Answer · 2014-02-03 10:04:03Z

1

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

answered Feb 3, 2014 at 10:04

RononDex

4,19527 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MacMan Over a year ago

Thanks and If I don't want scroll bars ? Just limit the height and truncate any extra text ?

RononDex Over a year ago

you can set overflow to hidden, that will remove all scrollbars

Mr Lister Over a year ago

The left column is 500px high on my computer, so I think you'll need at least that if you want them all to be the same. Or 42em if you want to be independent of font size.

Sam1604 · Accepted Answer · 2014-02-03 10:09:26Z

1

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

answered Feb 3, 2014 at 10:09

Sam1604

1,4973 gold badges16 silver badges27 bronze badges

Collectives™ on Stack Overflow

HTML / CSS Layout Issue

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related