tags:

views:

35

answers:

2

Hello guys

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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

+1  A: 

Just apply overflow:auto; on #main to make it wrap its floating children. Take a look on http://stackoverflow.com/questions/3921761/floating-image-to-the-left-changes-container-divs-height/3921781#3921781

(You can remove its height rule)

MatTheCat
Thanks very much for your great help
Thomas John
but this is not works in IE6, any idea ?
Thomas John
A: 

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

Rocket Ronnie