How to make a DIV stretch?

**cluelessphp** · Sep 18, 2007 14:19

Code:

<div style="background-color:#cccccc; width:200px;">
<p>Test</p> 
<p>HereIsAReallyLongWordThatShouldMakeTheDivExpand</p>
</div>

How can I make the div stretch to accommodate "HereIsAReallyLongWordThatShouldMakeTheDivExpand"
???

**Dr John** · Sep 18, 2007 14:44

change width:200px to min-width:200px
perhaps.
Perhaps, because you have given a totally isolated snippet of code, and teh rest of the page could affect things.

**blue_francis14** · Sep 18, 2007 15:40

remove the width, or try width: 100% or width:auto;

**Dan Schulz** · Sep 18, 2007 17:09

The default behavior of a DIV is to take up 100% of its parent's width. What you could (in theory) do is set the width of the parent to 200px, then force the paragraph's overflow to "auto", but I can't tell you if it would work without testing it.

**cluelessphp** · Sep 18, 2007 19:20

Doesn't min-width not work in IE 6?

I need the width to be at least some defined px.

If overflow is set to auto...wont it show a scrollbar?
EDIT: It does show a scroll :-(
EDIT: It works in IE 7 but shows a scroll in FF.

**Dan Schulz** · Sep 18, 2007 19:27

No, it doesn't, but there are ways around it.

**all4nerds** · Sep 18, 2007 21:09

Hello

Float, always fits

Code:

<!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" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<!-- saved from url=(0022)http://www.domain.com/ -->
	<style type="text/css">
	*{padding:0;margin:0;}
	
	.x,.z{
	background:#cccccc;
	float:left;
	}
	.w{min-width:200px;
	}
	
	.cl{clear:both;}
	
	.y{overflow:auto;}/* always fit IE 7 FF OP NS */
	* html .y{float:left;} * html .y p{height:1&#37;;}/* always fit IE 5 5.5 6 */
	* html .w{width:200px;}
	
	* html .z{left:3px;position:relative;margin:0 0 0 -3px;}/* 3 pixel jog wrap */
	</style>
		
	<style type="text/css">
	* html .fc{height:1%;} /* IE 5 5.5 6 haslayout */
	*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
	</style>
	
	<script type="text/javascript">

	</script>
</head>
<body>

<p class="cl">always fits, stretch</p>

<div class="x w">
<p>Test</p> 
<p>HereIsAReallyLongWordThatShouldMakeTheDivExpand</p>
</div>
<div class="y">
<p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
</p> 
</div>

<p class="cl">wrap, strech</p>

<div class="z w">
<p>Test</p> 
<p>HereIsAReallyLongWordThatShouldMakeTheDivExpand</p>
</div>
<p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
</p> 

<p class="cl">always fits, (min) width</p>

<div class="x w">
<p>Test</p> 
<p>Test</p>
</div>
<div class="y">
<p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
</p> 
</div>

<p class="cl">wrap, (min) width</p>

<div class="z w">
<p>Test</p> 
<p>Test</p>
</div>
<p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
</p> 

<p class="cl">always fits, content width</p>

<div class="x">
<p>Test</p> 
<p>HereIsAReal</p>
</div>
<div class="y">
<p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
</p> 
</div>

<p class="cl">wrap, content width</p>

<div class="z">
<p>Test</p> 
<p>HereIsAReallyLongWord</p>
</div>
<p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
</p> 

<p class="cl">&nbsp;</p>

<p class="cl">always fits, no width, no content</p>

<div class="x">

</div>
<div class="y">
<p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
</p> 
</div>

<p class="cl">wrap, no width, no content</p>

<div class="z">
</div>
<p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
</p> 

<p class="cl">&nbsp;</p>


</body>
</html>

User Tag List

Thread: How to make a DIV stretch?

Thread Tools

Display

How to make a DIV stretch?

Bookmarks

Bookmarks

Posting Permissions