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
219 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS: Making responsive table look nicer 7 38
CSS Style 8 43
Navigation Menu Does Not Show on iPad 4 34
Web page design problem 3 18
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…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

730 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