Programming Forums > Web Development and Design > HTML / XHTML / CSS

natefico · Sep 3rd, 2006, 9:44 AM

Hello everyone,

How do I make it so a div is at least so many pixels high and it will auto adjust for over flow?

Right now my blog, http://www.natefico.com
has it so that both divs height are to auto.
As in the main box is on auto height and so is the div which contains the post. Only problem is that the majority of my blog posts are not long enough. I do not want to just add line breaks to make it bigger.

Is there a way I can set the .main to so many pixels high, but when the post div overflows that the height of .main adjusts?

Thanks,
--Natefico

Darkhack · Sep 3rd, 2006, 11:30 AM

I too have been fighting with this same senario for a long time. Sadly I have not found a way that works on all of the big 3. IE, Firefox, and Safari. You are kind of stuck in a "pick any two" situation. There are certain ways to get it to work for any two browers but the third one which varies by the method used will break it. For my own website, I set it up so that it works under IE and Firefox by default and then I have browser detection for Safari. Browser detection will require either Javascript or a server side language like PHP.

Basically you want to specify a "min-height" and then have the regular height set at auto.

[PHP]
if( Browser() == "Safari")
echo("<div style='width: 80%; min-height: 800px; height: auto;
float: left; background-color: #FFFFFF; background-repeat: repeat-y; padding: 0px; position: relative;'>");
else
echo("<div style='width: 80%; min-height: 800px; height: auto !important; height: 120%;
float: left; background-color: #FFFFFF; background-repeat: repeat-y; padding: 0px; position: relative;'>");
[/PHP]

natefico · Sep 3rd, 2006, 11:54 AM

min-height is a W3 Standard so why doens't it work in IE? I used min-height to fix it, but only works in FF. Solution to get this to work in IE? I do not really mind not having Safari support.

Agent 47 · Sep 3rd, 2006, 12:07 PM

http://www.cssplay.co.uk/boxes/minheight.html

Rather than using hacks like this though, I tend to use a simpler method
to simulate 'min-height' on divs:

(Toggle Plain Text)

	<style type="text/css">
	/*<![CDATA[*/
	.container
	{
		border:1px solid red;
		width:200px;
		float:left;
		margin:20px;
		font-size:0.8em;
	}
	.v_stretcher
	{
		float:left;
		height:200px;
	}
	.clearer {clear:both;}
	/*]]>*/
	</style>

(Toggle Plain Text)

<div class="container">
	<div class="v_stretcher"></div>
	
	<p>Put your content here.<p>
	<p>You should see that this div is much higher than the content within.</p>
	
	<div class="clearer"></div>
</div>

<div class="container">
	<div class="v_stretcher"></div>
	
	<p>Put your content here.<p>
	<p>The content in this div should stretch it.</p>
	<p>The content in this div should stretch it.</p>
	<p>The content in this div should stretch it.</p>
	<p>The content in this div should stretch it.</p>
	<p>The content in this div should stretch it.</p>
	
	<div class="clearer"></div>
</div>

Sep 3rd, 2006, 9:44 AM	#1
natefico Programmer Join Date: Jan 2005 Posts: 35 Rep Power: 0	expanding div? Hello everyone, How do I make it so a div is at least so many pixels high and it will auto adjust for over flow? Right now my blog, http://www.natefico.com has it so that both divs height are to auto. As in the main box is on auto height and so is the div which contains the post. Only problem is that the majority of my blog posts are not long enough. I do not want to just add line breaks to make it bigger. Is there a way I can set the .main to so many pixels high, but when the post div overflows that the height of .main adjusts? Thanks, --Natefico

Sep 3rd, 2006, 12:07 PM	#4
Agent 47 Hobbyist Programmer Join Date: Nov 2005 Posts: 122 Rep Power: 3	http://www.cssplay.co.uk/boxes/minheight.html Rather than using hacks like this though, I tend to use a simpler method to simulate 'min-height' on divs: (Toggle Plain Text) <style type="text/css"> /<![CDATA[/ .container { border:1px solid red; width:200px; float:left; margin:20px; font-size:0.8em; } .v_stretcher { float:left; height:200px; } .clearer {clear:both;} /]]>/ </style> <style type="text/css"> /<![CDATA[/ .container { border:1px solid red; width:200px; float:left; margin:20px; font-size:0.8em; } .v_stretcher { float:left; height:200px; } .clearer {clear:both;} /]]>/ </style> (Toggle Plain Text) <div class="container"> <div class="v_stretcher"></div> <p>Put your content here.<p> <p>You should see that this div is much higher than the content within.</p> <div class="clearer"></div> </div> <div class="container"> <div class="v_stretcher"></div> <p>Put your content here.<p> <p>The content in this div should stretch it.</p> <p>The content in this div should stretch it.</p> <p>The content in this div should stretch it.</p> <p>The content in this div should stretch it.</p> <p>The content in this div should stretch it.</p> <div class="clearer"></div> </div> <div class="container"> <div class="v_stretcher"></div> <p>Put your content here.<p> <p>You should see that this div is much higher than the content within.</p> <div class="clearer"></div> </div> <div class="container"> <div class="v_stretcher"></div> <p>Put your content here.<p> <p>The content in this div should stretch it.</p> <p>The content in this div should stretch it.</p> <p>The content in this div should stretch it.</p> <p>The content in this div should stretch it.</p> <p>The content in this div should stretch it.</p> <div class="clearer"></div> </div> __________________ "I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet"

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Sep 3rd, 2006, 11:30 AM	#2
Darkhack Hobbyist Programmer Join Date: Dec 2005 Location: Kansas City Posts: 102 Rep Power: 3	I too have been fighting with this same senario for a long time. Sadly I have not found a way that works on all of the big 3. IE, Firefox, and Safari. You are kind of stuck in a "pick any two" situation. There are certain ways to get it to work for any two browers but the third one which varies by the method used will break it. For my own website, I set it up so that it works under IE and Firefox by default and then I have browser detection for Safari. Browser detection will require either Javascript or a server side language like PHP. Basically you want to specify a "min-height" and then have the regular height set at auto. [PHP] if( Browser() == "Safari") echo("<div style='width: 80%; min-height: 800px; height: auto; float: left; background-color: #FFFFFF; background-repeat: repeat-y; padding: 0px; position: relative;'>"); else echo("<div style='width: 80%; min-height: 800px; height: auto !important; height: 120%; float: left; background-color: #FFFFFF; background-repeat: repeat-y; padding: 0px; position: relative;'>"); [/PHP]

Sep 3rd, 2006, 11:54 AM	#3
natefico Programmer Join Date: Jan 2005 Posts: 35 Rep Power: 0	min-height is a W3 Standard so why doens't it work in IE? I used min-height to fix it, but only works in FF. Solution to get this to work in IE? I do not really mind not having Safari support.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Programming Forums > Web Development and Design > HTML / XHTML / CSS

expanding div?