Minimum height for divs - is there a way to do it and be compatible with most / all modern popular browsers?

I have a page that includes a div and I would like to include a css for a div that forces minimum height.

Is there a solid solution that works with all or most modern popular browsers?  I don't care about IE6.  But if it can be included in the solution that would be nice.

BTW I see this among many solutions:

http://htmlcsstutorials.blogspot.com/2009/06/how-to-have-div-min-height.html

Your comments and discussion welcome.  I will split the points appropriately :)

Thanks

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
What's wrong with using min-height in your styles - If you don't care about IE6 (which is a really good thing), then min-height will work across all modern browsers.


<div style="min-height:300px">
     This will be at least 300px high!
</div>

Open in new window

0
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
What kind of content is going in there?  Will that div ever be empty?  Any kind of content will force the div to some minimum height.  A transparent gif image with a width of 1 and a height of 50 will force the div to have a height of 50.  Do align right and it's out of the way.
0
 
Rowby GorenAuthor Commented:
The div will never be empty.  There will always be some text in the div.   The transparent image sounds like an interesting solution, that certainly would be compatible any browser.  I suppose I would create some of a div like this:

<div id="container">
<div id="container text content> Text text </div><div id="container gif"> (insert the invisible gift 1px by 200px here) </div>
</div>

Something like the above?

Rowby
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
Rowby GorenAuthor Commented:
Something like this.
invisble-gif.jpg
0
 
Dave BaldwinFixer of ProblemsCommented:
@rowby, while my suggestion about the GIF will work in a table, I can't get it to work in a simple way with 'div's.  I get a lot of odd results.  Here's my test page if you want to play with it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
#container { 
	background-color: #eeffee;
	width: 330px;
	height: 150px;
	border: thin solid black;
	clear: both;
	}
#container2 { 
	background-color: #eeeeff;
	width: 330px;
	height: 150px;
	}
#container2 { 
	background-color: #eeffff;
	}
-->
</style>
</head>
<body>

<div id="container">
<img alt="transparent (1K)" src="transparent.gif" height="100" width="1" align="right" border="1" />
<div id="container text content"><img alt="transparent (1K)" src="transparent.gif" height="200" width="1" align="right" border="1" />Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text </div>
<br clear="all" />
</div>
&nbsp;
<br clear="all" />&nbsp;
<div id="container2">
<div id="container2 text2 content2" style="border: thin solid black;"><img alt="transparent (1K)" src="transparent.gif" height="200" width="1" align="right" border="1" />Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text</div>
</div>
<br clear="all" />&nbsp;

<table border="1" cellpadding="0" cellspacing="0" summary="" id="container3">
<tr>
<td width="400"><img alt="transparent (1K)" src="transparent.gif" height="200" width="1" align="right" border="1" />Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text </td>
<td>&nbsp;&nbsp;&nbsp;</td>
</tr>
</table>

</body>
</html>

Open in new window

0
 
Rowby GorenAuthor Commented:
Thanks  - I will be exploring both the min height solution and your table / div solution.

Rowby
0
 
Chris StanyonConnect With a Mentor Commented:
@Dave / @Rowby

A few points worth noting

1. Why use a transitional DOCTYPE for new documents. It would be more advisable to use strict and make use of the current standards, rather than relying on older, deprecated attributes and elements by using transitional (leads to lazy code that will eventually break)

2. On that point, the 'clear' attribute for <BR> is deprecated. As are the 'align' and 'border' attributes of IMG

3. Why use tables at all. There is no reason to use tables for anything other than tabular data - certainliny not layout!

4. IDs can't contain spaces!

The whole process can be done, quite simply by using CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Min Height DIV</title>
<style type="text/css">
	#myDiv { min-height:300px; width:500px; border: 1px solid #aaaaaa; }
</style>
</head>

<body>
<div id="myDiv">
     This will always be at least 300px high!
</div>
</body>
</html>

Open in new window

0
 
Rowby GorenAuthor Commented:
Thanks all. I am checking this on the road. I will check out your suggestions and solutions later today, and split points accordingly.
0
 
Rowby GorenAuthor Commented:
Thanks all

Min height worked.  Saving the Gif solution for future perhaps for any client who insists on IE 6.0 solution

And thanks also to ChrisStanyon for his additional comments.

Rowby
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.