Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Works in IE, but not Firefox, CSS Height Problem

Status
Not open for further replies.
jakeisstoked

jakeisstoked

Technical User
May 9, 2003
28
AU
Ok, I'm new to these all CSS type layouts, and I'm having a real headache trying to get even the most standard things looking right.
This layout looks fine in IE, but in Firefox the div's don't stretch according to the content, like, the containers don't resize the containers they're inside and it looks silly because text 'falls out'. Obviously the content in any of the columns can be anysize and I want them all to stretch evenly to allow for that. Is Firefox buggy with CSS? It's a pain that things work so differently in common browsers.

Thanks,
Jake

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style type="text/css">
 
body
{
	text-align:center;
	font-family:arial,helvetica,geneva,sans-serif;
}
 
#header, #footer, #main, #heaer
{
	text-align:center;
	margin:auto;
}
 
#header
{
	width:500px;
	background:#555555;
	padding:0px;
}
 
#main
{
	width:500px;
	height:100%;
	font-size: 30;
}
 
#left
{
	width:30%;
	float:left;
	background:#999999;
	height:100%;
}
 
#middle
{
	width:40%;
	float:left;
	background:#EEEEEE;
	height:100%;
}
 
#right
{
	width:30%;
	float:left;
	background:#999999;
	height:100%;
}
 
#footer
{
	width:500px;
	background:#555555;
	clear:both;
	height:35px;
}
 
 
 </style>
</head>
 
<body>
 
<div id="header">header</div>
 
<div id="main">
	<div id="left"><p>LEFT</p></div>
	 
	<div id="middle">
		<p>
		Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text 
		</p>
	</div>
	 
	<div id="left"><p>RIGHT</p></div>
</div>
 
<div id="footer">footer</div>
 
</body>
</html>
 
Sort by date Sort by votes
jakeisstoked said:
Is Firefox buggy with CSS?
Click to expand...
No, it is your logic that it is flawed. 100% height means 100% of the parent element, which (if nothing else) is the viewport (or the browser window). So, if there is content that exceeds browser window, content will spill over the container that is restricted in height. If you pour a large bucket of water into a small bottle, do you expect water to spill out or the bottle to expand? You are looking for min-height attribute, which defines the smallest height for an element but does not restrict its largest height. Unfortuntaly the property is not supported in IE and certain hacks have to be put in place for that browser.
 
Upvote 0 Downvote
As a hack for IE (and it is just that, for it won't work in all cases), you can use:

Code: 
_height: someValue;
min-height: someValue;

In most cases, IE treats height as min-height... but Firefox et al treat it as height. So the underscore hack will make IE abide by the height, but not screw around with tthe other browsers. Give it a whirl. Of course, it won't validate, but them's the breaks. If you want a better hack that validates, consider using behaviours or JS to emulate min-height in IE.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Ok, thank you Dan, I realise I should have been using min-height now.
Now it stretches to the content in both browsers,,, but (sorry if this is something obvious I'm missing) now the left/middle/right divs don't stretch to the page container (the page container is only stretching to accomodate left/middle/right in IE), so they are stretched to their content size only.
I want the columns to stretch to the size of the page container aswell, to keep them all the even.

-Jake
 
Upvote 0 Downvote
So now the goalposts have moved. I suggest you list all your desired functionality down, rather than piecemeal... otherwise people will give you solutions to one problem at a time (as you ask for them), not knowing how compatible or extensible they need to be.

There are many CSS-based column layouts our there... and they have all been discussed many times here. If that is what you are after, I'd do some searching and find them - because at the moment, it sounds like that is what you are after.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Sorry, I thought I first put it succinctly, my fault. I'll look elswhere in the forum for an answer.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
814
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
812
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
635
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
691
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top