Div in HTML not floating left with CSS
- by rusty009
My div with class name 'header-body-right' doesn't seem to be floating to the left of my div named 'header-body-centre' and I can't understand why, here is my HTML,
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> </TITLE>
<meta charset="UTF-8" />
<link href="main.css" rel="stylesheet" type="text/css">
<META NAME="Generator" CONTENT="Notepad">
<META NAME="Author" CONTENT="00">
<META NAME="KEYWORDS" CONTENT="" />
<META NAME="DESCRIPTION" CONTENT="" />
</HEAD>
<BODY>
<div class="header-top">
</div>
<div class="header-body">
<div class="header-body-centre">
<div class="logo">
<img src="logo.png" />
</div>
</div>
<div class="header-body-right">
test
</div>
</div>
<div class="navbar">
</div>
<div class="content-container">
</div>
</BODY>
</HTML>
The CSS I am using for the code is posted below,
body
{
margin:0px;
padding:0px;
}
.header-top
{
height:11px;
width:100%;
background-image: url('HeaderTopNav.png');
background-repeat: repeat-x;
}
.header-body
{
width:100%;
height:100px;
}
.header-body-centre
{
margin: 0 auto;
height:100%;
width:70%;
}
.header-body-right
{
width:15%;
height:100px;
float:left;
}
.navbar
{
height:35px;
width:auto;
border: 1px solid green;
}
.logo
{
margin-top:35px;
float:left;
}
.quickNav
{
float:right;
}
.container
{
margin: 0 auto;
background-color: #fff;
border: 2px solid #c9c8c8;
border-bottom: none;
height:auto;
overflow:hidden;
width: 1000px;
clear:both;
}
Can anyone see why? I have tried floating the header-bosy-centre and decreasing the width of the header-body-right but nothing works. Can anyone see what I have done wrong? I am out of ideas. Thanks.
