More css related problems

[dmccabe]

Ok so I have a header div with 4 divs inside it

 

LOGO

HEADER MENU LEFT - HEADER MENU - HEADER MENU RIGHT

 

which is how it should be laid out however it coming out like this:

 

 

LOGO - HEADER MENU LEFT - HEADER MENU - HEADER MENU RIGHT

 

all in one row:

 

html

<div id="header">
	<div id="logo">

	</div>
	<div id="headermenu_left">
	</div>
	<div id="headermenu">
	<ul>
		<li><a href="<?php $rootdir?>callcentre/" title="Call Centre Dept">Call Centre</a></li>
		<li><a href="#">Menu item 2</a></li>
		<li><a href="#">Menu item 2</a></li>
		<li><a href="#">Menu item 2</a></li>
	</ul>
	</div>
	<div id="headermenu_right">
	</div>
</div>

 

css

#header {
width: 100%;
height: 150px;
clear: both;
background: #695eaa;
}

#logo {
height: 101px;
width: 200px;
float: left;
clear: both;
background: url('img/logo.png');
}
#headermenu_left {
height: 49px;
width: 22px;
margin: 0;
padding: 0;
background: #9188c1 url('img/hdrmenu_left.png') no-repeat;
float: left;
}

#headermenu_right {
height: 49px;
width: 22px;
margin: 0;
padding: 0;
background: #9188c1 url('img/hdrmenu_right.png') no-repeat;
float: right;
}
#headermenu {
height: 49px;
width: 724px;
float: left;
background: #9188c1 url('img/hdrmenu_middle.png') repeat-x;
line-height: 49px;
}

 

So why is the header menu stuff up next to the logo instead of underneath it?

[haku]

Because you are floating them both left, so they bump up on each other.

 

Add:

 

clear: left;

 

to the header-left div's CSS.