Geek Answers Handbook

Div issue: height does not apply with content

I am trying to create a webpage using CSS (the table is smaller), but my main content area does not apply to the content, please check my html and css codes and give me solutions, thanks

<!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=utf-8" /> <link rel="stylesheet" href="style/styles.css" type="text/css" /> <title>::Model::</title> </head> <body> <div id="wrapper"> <div id="header"> header </div> <div id="main"> <div id="left">left</div> <div id="right">right</div> </div> <div id="footer"> footer </div> </div> </body> </html>

Css code

 body{ margin:0px; padding:0px; height:auto; } #wrapper{ margin:0px auto; width:1000px; } #header{ height:50px; border:#CCCCCC solid 1px; margin:2px; padding:5px; } #main{ height:auto; border:#CCCCCC solid 1px; margin:2px; padding:5px; } #footer{ height:100px; border:#CCCCCC solid 1px; margin:2px; padding:5px; } #left{ border:#CCCCCC solid 1px; width:640px; padding:4px; float:left; margin-right:2px; } #right{ float:right; padding:4px; border:#CCCCCC solid 1px; width:320px; }

Thanks again

+4
source share
2 answers

Just apply overflow:auto; in #main so he wrapped his floating kids. Take a look at the Floating image to the left changes the height of the container div

(You can remove its height rule)

+7
source

In the document, you have placed elements that, as the name implies, mean that they float above your main "div". Therefore, it does not apply.

It’s easy to fix, but you just need to insert “clear”.

your html should look like this, pay attention to the extra div.

 <div id="main"> <div id="left">left</div> <div id="right">right</div> <div class="clearme"></div> </div>

And just add the following to your css.

 .clearme{clear:both}

More information about clear properties and its use can be found here: http://www.tutorialhero.com/tutorial-64-css_clear_property.php

+3
source

More articles:


All Articles