Menu
I am trying to create a web page using CSS (Table less) but my main content area is not extending with contents please check my html and css codes and give me a 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
490
Just apply overflow:auto; on #main to make it wrap its floating children.
Take a look on Floating image to the left changes container div's height
(You can remove its height rule)
89
You have floated elements in your document, which as the name suggests means they float above your 'main' div. Hence it isnt extending.
Easy to fix however, you just need to stick a 'clear' in.
your html should look like this, notice the extra div.
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div class="clearme"></div>
</div>
And simply add the following to your css.
.clearme{clear:both}
More can be found on the clear property and its usage here: http://www.tutorialhero.com/tutorial-64-css_clear_property.php
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
