I am trying to put everything in a containing CSS area called #container (which has a border) but it is not recognising it unless I put some text after the CSS within the #container.
In other words: In the below code, if you remove the words “WHAT IS WRONG” you will see the #container moves up and does not house the #div container and it contents (#div1 and # div 2)? How can I make it so I do not have to write some text where “WHAT IS WRONG” is?
If I add ‘float:left;’ to #container it works. But I want it centred and it does not work if I write ‘centred’. I thought ‘margin:0 auto 0 auto;’ which I have included would be fine to centre it, which it does (but not when I write float left).
<!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" />
<title>Untitled Document</title>
<style>
#divcontainer {
width: 970px;
float: left;
}
#div1 {
width: 510px;
float: left;
}
#div2 {
width: 420px;
float: right;
}
#container {
width:975px;
margin:0 auto 0 auto;
padding:5px;
border:1px solid #cccccc;
background:#ffffff;
}
</style>
</head>
<body>
<div id='container'>
<div id='divcontainer'>
<div id='div1'>
this is some text this is some text this is some text this is some text
</div>
<div id='div2'>
this is some text this is some text this is some text this is some text
</div>
</div>
WHAT IS WRONG
</div>
</body>
</html>
It seems to be working if I remove the float:left from #divcontainer, and clear the floats for div1 and div2. If you did need #divcontainer to be floated, you could wrap another div around it and float that. It starts behaving weirdly when you have floated elements directly within other floated elements.
To clear the floats for div1 and div2, I added a new div underneath them with the style clear:both. There are more elegant ways of doing this however, type “clearfix hack” or something similar into google to find out more.
<!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" />
<title>Untitled Document</title>
<style>
#container {
width:975px;
border:1px solid #ccc;
background:#eef;
padding:5px;
margin:0 auto;
}
#divcontainer {
overflow:hidden;
background:#fee;
outline:1px solid #f00;
}
#div1 {
width:510px;
float:left;
background:#cff;
outline:1px solid #0ff;
}
#div2 {
width:420px;
float:right;
background:#cfc;
outline:1px solid #0f0;
}
</style>
</head>
<body>
<div id='container'>
<div id='divcontainer'>
<div id='div1'>
<p>this is some text this is some text this is some text this is some text</p>
</div>
<div id='div2'>
<p>this is some text this is some text this is some text this is some text</p>
</div>
</div>
<p>floats need to be cleared. See #divcontainer.</p>
</div>
</body>
</html>