theAntiGeek Posted August 14, 2006 Share Posted August 14, 2006 alright guys. im having trouble getting a <div> to stretch to contain it contents. the prob is that it just isnt stretching at all. the div just sits at the top of the screen, (i can see it cos of the border i have on it), while the contents that the div is spose to contain, displays perfectly down the rest of the page. im using overflow:visible; to make the stretching happen.the div thats spose to stretch is called "content" and heres the css for it:#content{ position:relative; margin:auto; width:722px; height:420px; border:1px solid #000000; overflow:visible; background-color:#FFF; background-image:url(images/background.gif); background-repeat:no-repeat; background-position:bottom; padding: 10px; border-left:1px solid #d0bc0f; border-right:1px solid #d0bc0f; }heres the code on the html page: (could the problem be that "content" contains other divs that are placed using absolute positioning?) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Northstar New Media</title><link href="northstar.css" rel="stylesheet" type="text/css" /></head><body><div id="header"><h1 class="off-left">Northstar New Media - Web Design Services and Interactive Multimedia</h1></div><div id="nav"><div id="links"><ul><li><a href="#">Web Services</a></li><li><a href="#">Multimedia Design</a></li><li><a href="#">3D Landscape Visualisation</a></li><li><a href="#">Contact NorthStar</a></li></ul></div></div><div id="content"> <!--DIV CONTENT STARTS HERE--> <div id="featured"> </div> <div id="indextext"> <p><span id="startertext">NorthStar New Media</span> is an innovative web and multimedia design company with a large portfolio of projects. <br /><br /> If you are looking for a small <span id="purple">website</span> for your business, a full <span id="purple">e-commerce</span> solution, a database driven <span id="purple">web application</span> or a full business <span id="purple">web promotion</span> strategy NorthStar New Media’s web team has a solution for you. <br /><br /> Our multimedia arm specialises in promotional & training <span id="purple">multimedia CDROM</span> or <span id="purple">kiosk</span> driven applications and this part of our business has developed considerable expertise in <span id="purple">3d terrain simulation</span> and the <span id="purple">visualisation</span> of developments like windfarms, aquaculture and other industrial developments to assist in planning. <br /><br /> Our support services include poster or <span id="purple">print design</span> and also product or <span id="purple">digital photography</span> and <span id="purple">video</span> as well as professional <span id="purple">digital audio editing and post production</span> to commercial CD standards. <br /><br /> Please contact us for a competitive quote or more information.<br /> </p> </div> <div id="sidebarindex"> <div id="subnav"><a href="#">Web Design & Hosting<br /> E-Commerce & Web Applications<br /> Website Maintenance & Promotion<br /> Multimedia CDROMs<br /> Web Based Multimedia<br /> Multimedia Kiosks & Touch Screens<br /> Conventional Print Media<br /> The Virtual Terrain Project<br /> ZVI Analysis<br /> Photomontages</a></div> <div id="login"><a href="#">Web Customer Login Area</a></div> <div id="vtp"></div> </div> <div id="footer"><p>Validated for XHTML and CSS</p></div></div> <!--DIV CONTENT CLOSES HERE--></body></html> Link to comment Share on other sites More sharing options...
murfitUK Posted August 14, 2006 Share Posted August 14, 2006 Is it essential for you to define the height of the container? I think IE and FireFox handle things differently if the text is too long. IE stretches the container but FF doesn't. The other thing to remember is that your computer will be displaying font size based on your own default values but others might have a different size.You can change the font size easily - eg with a scroll mouse hold down ctrl and spin the wheel.For example, this is my usual font:usual sized fontbut I can make it bigger:larger sized fontI can also make it tiny (as you can see it fits well but looks ridiculous):tiny sized fontIf you remove the height attribute from the css it should size appropiately to fit the contentsAlternatively, if you really do want the box to be that exact size try changing overflow: visible to overflow: scroll and it should put in scroll bars to display the text that can't fit. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now