Solved

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

Posted on 2011-03-19
9
203 Views
Last Modified: 2012-05-11
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
0
Comment
Question by:Rowby Goren
  • 5
  • 2
  • 2
9 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 50 total points
ID: 35172557
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 35172641
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 35172675
Something like this.
invisble-gif.jpg
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 450 total points
ID: 35189399
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35191664
@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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 35191865
Thanks  - I will be exploring both the min height solution and your table / div solution.

Rowby
0
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 450 total points
ID: 35192038
@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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 35207672
Thanks all. I am checking this on the road. I will check out your suggestions and solutions later today, and split points accordingly.
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 35258226
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

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Where to define breakpoints for responsive CSS 2 41
Centering Vertically 3 34
Error on link 14 46
Bottom border change 5 13
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

806 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question