krow Posted October 15, 2012 Share Posted October 15, 2012 Hello, I'm having difficulties trying to understand how the wrapper works, or I think the problem may also be caused by the float and/or clear attributes? In my example I have a wrapper which holds two boxes, when I type code in the boxes they expand automatically downwards but my wrapper remains static, it won't expand as I type in to the two boxes. Does it mean I have to explicitly set a height to the wrapper or is it something to do with the float and/or clear attributes? I set different colors to the two boxes and the wrapper just to see if the wrapper actually expands but it won't move. Thanks for your help. <!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=windows-1252" /><title>Here goes a title</title> <style type="text/css"> body, h1, html{margin:0;padding:0;}#wrapper{width:900px;background:#E9E9E9;margin:0 auto;background:#FFFF33;}#left-content-area{width:600px;float:left;background:#0066FF;}#right-content-area{width:300px;float:right;background:#CCCCCC;} </style> </head> <body> <div id="wrapper"> <div id="left-content-area"><h1>some text goes here</h1><p>some text goes heresome text goes hersome text goes hersome text goes hersome text goes hersome text goes hersome text goes her</p></div> <div id="right-content-area"><h1>some text goes here</h1><p>some text goes heresome text goes hersome text goes hersome ttext goes heresome text goes hersome text goes hersome tetext goes heresome text goes hersome text goes hersome teext goes hersome text goes hersome text goes hersome text goes her</p></div> </div><!-- end of wrapper --> </body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted October 15, 2012 Share Posted October 15, 2012 The wrapper will extend around the boxes if you set overflow to "auto". Normally, a block won't consider floated or positioned children when calculating its height. Link to comment Share on other sites More sharing options...
krow Posted October 15, 2012 Author Share Posted October 15, 2012 I love forums! thanks Ingolme. That solved my problem. Link to comment Share on other sites More sharing options...
krow Posted October 15, 2012 Author Share Posted October 15, 2012 I love forums! thanks Ingolme. That solved my problem. Well actually, it was better to set overflow to hidden because when I set it to auto then I have unnecessary scroll bars in my page. Set to hidden is perfect Link to comment Share on other sites More sharing options...
Ingolme Posted October 15, 2012 Share Posted October 15, 2012 There shouldn't be scroll bars when set to auto unless your content is getting outside of the box. Though setting it to hidden certainly is a better option. 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