CODEWITHSUNDEEP
htmlcss
Baffled by ASP.NET
Baffled by ASP.NET

Reputation: 559

CSS max-height not working

I have a very simply problem where I need a div to expand to fit its contents unless the height reaches a certain size, when I want the div to scroll vertically instead. As a test, I created a page containing:

<div style="width:300px;max-height:25px;background-color:green;overflow:auto;">
    1<br />
    2<br />
    3<br />
    4<br />
    5
</div>

Unfortunately, the max-height doesn't seem to work. What am I doing wrong?

I am using IE7.

Upvotes: 28

Views: 114674

Answers (4)

Tikam Chand
Tikam Chand

Reputation: 96

Try applying:

box-sizing: border-box;

Upvotes: 0

Georg Sch&#246;lly
Georg Sch&#246;lly

Reputation: 126095

The problem is your browser. Maybe you could wrap this div in another div that has the fixed height of 25px. Of course this wouldn't be exactly the same as max-height.

An article about a solution.

Edit: According to Microsoft it should work in IE7+.

Have you set an appropriate doctype? If not IE7 uses an old layout engine. You should use HTML 4 or XHTML.

Upvotes: 11

TJ L
TJ L

Reputation: 24452

Here's the cross-browser way to set min-height:

min-height: 400px;
height:auto !important;
height:400px;

IE treats the height attribute as min-height, and ignores min-height.

Edit: Misread the question as min-height! (>_<)

Upvotes: 6

Iain M Norman
Iain M Norman

Reputation: 2085

Your code works for me.

When I wrap it with a page!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>1 2 3 4 5</title>
</head>

<body>
<div style="width:300px;max-height:25px;background-color:green;overflow:auto;">
    1<br />
    2<br />
    3<br />
    4<br />
    5
</div>
</body>

</html>

Works in IE7 and Chrome fine.

FF3 is not giving me scrolls bars.

But the max height works fine in all three.

Without the surrounding page though your snippet of code does not work. I suggest testing code in a valid page of HTML. * grins *

Upvotes: 2

Related Questions