?
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
Medium Priority
?
232 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 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 200 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 1800 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 84

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 45

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 1800 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month16 days, 13 hours left to enroll

864 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