| SitePoint Sponsor |
|
|
User Tag List
Results 1 to 7 of 7
Thread: How to make a DIV stretch?
-
Sep 18, 2007, 13:19 #1Non-Member
- Join Date
- Feb 2006
- Posts
- 294
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How to make a DIV stretch?
How can I make the div stretch to accommodate "HereIsAReallyLongWordThatShouldMakeTheDivExpand"Code:<div style="background-color:#cccccc; width:200px;"> <p>Test</p> <p>HereIsAReallyLongWordThatShouldMakeTheDivExpand</p> </div>
???
-
Sep 18, 2007, 13:44 #2SitePoint 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.Dr John
www.kidneydialysis.org.uk
-
Sep 18, 2007, 14:40 #3SitePoint Enthusiast
- Join Date
- Jun 2007
- Location
- Philippines
- Posts
- 27
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
remove the width, or try width: 100% or width:auto;
-
Sep 18, 2007, 16:09 #4In memoriam
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,495
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 18, 2007, 18:20 #5Non-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.
-
Sep 18, 2007, 18:27 #6In memoriam
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,495
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No, it doesn't, but there are ways around it.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 18, 2007, 20:09 #7Non-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%;}/* 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"> </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"> </p> </body> </html>Last edited by all4nerds; Sep 19, 2007 at 02:21.
Bookmarks