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
194 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Hovering effect 9 46
Synchronizing CSS load 3 29
Kill default webkit margin!  Please! 6 22
CSS z-index issue 3 19
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

912 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now