Jump to content

Understanding the wrapper


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...