SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make a DIV stretch?

    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"
    ???

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Philippines
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    remove the width, or try width: 100&#37; or width:auto;

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The default behavior of a DIV is to take up 100&#37; 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.

  5. #5
    Non-Member
    Join Date
    Feb 2006
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, it doesn't, but there are ways around it.

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by all4nerds; Sep 19, 2007 at 02:21.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •