Positioning problems

[maxdream01]

Hey everyone,
im having problems with positioning a few divs heres my problem:

I'm trying to get the header div to spread across the screen at the top (width = 100%) and at a fixed height of 100px. I also want to get the banner div to be floated to the left of the header div and also be inside the header div and have the search div positioned to the far right and inside the header div. Finally i want the actual search bar (searchbox div) at the bottom of the header div. But no matter how i try it i cant seem to get all these to work at the same time.

Heres my HTML

<div class="header">
	<div class="banner">
		<h1 class="title">Title</h1>
	</div>
	<div class="search">
    <div class="searchbox">
		<form action="search.php" method="get">
        <label>Search</label>
        <input  name="search" type="search" />
        <input type="submit" />
		</form>
    </div>
	</div>
</div>

and here is the CSS:

div.header{
	border:1px #000 solid;
	width:auto;
	height:100px;
	margin-top:5px;
	float:left;
}
div.banner{
	float:left;
	height:100px;
	width:auto;
}
div.search{
	display:block;
	border:1px #000 solid;
	float:right;
	margin-right:5%;
	width:auto;
	height:100px;
	position:absolute;
}
div.searchbox{
	position:relative;
	bottom:0;
}

Thanks

[ralph.m]

Try something like this:

div.header {
	border:1px #000 solid;
	width:100%;
	margin-top:5px;
        overflow: hidden;
        position: relative;
}

div.banner{
	float:left;
	height:100px;
}

div.search{
	border:1px #000 solid;
	margin-right:5%;
	position:absolute;
        right: 0;
        bottom: 0;
}

You should probably set a width for the banner and the search div (other than auto). You don't need the searchbox div at all.

[maxdream01]

Thanks that worked perfectly, i was playing around with margins before your post and had almost got it to work but this does so much better, thanks. While, we're discussing this, i was wondering how one could, make the header div span only say a two thrds of the page and center it while also accomplishing this, because im noticing that the header spanning the entire widt of the page isnt what im looking at could i do something like set the left and right margins to auto and set a standard width on the header div like 900px?

[maxdream01]

Never-mind, that's exactly what i did and it worked out, thanks anyway though.

[ralph.m]

could i do something like set the left and right margins to auto and set a standard width on the header div like 900px?

Yep, that's the way to go. Sometimes you might want a background color on the header section to extend across the whole screen, in which case, have an outer div width: 100% with the bg color on it and then the inner div centered like you have.

[maxdream01]

Ok, thank you for the advice. I'll see if i like how that looks for site.