Nested Div Alignment

[neumadr]

For the header of my website, I want a div#header to have a blackground and the h1, then a div#nested_header to have an image but always been justified to the right side of the div#header. I want both of these headers to have the same height and basically be seamless.
E.G. [Header Title [Banner]]

How do I do this? What would I add?

//STYLE
div#nested_header {height:57px;width:415px;}
div#header {background-color:black; width:100%; max-height:57px;}

//BODY
<div id="header">
<h1>Header Title</h1>
<div id="nested_header">
<img src="banner.png" width="415" height="57" />
</div>
</div>

[Robin_reala]

Welcome to WebmasterWorld neumadr!

I’d do something like:

#header { height: 57px; position: relative; }
#nested_header { width: 415px; height: 57px; position: absolute; right: 0; top: 0; }

[edited by: Robin_reala at 11:51 am (utc) on Dec. 23, 2006]

[neumadr]

Works! Thanks a lot!

For my own understanding, what's the dynamic with the relative and absolute positioning? - Why is the nested header in this case absolute?

I suppose since the Header is relative and the Nested Header is absolute, any absolute Nested Header dimensions are based off of the Header dimensions?

[neumadr]

OK, instead of making another topic, I'll just use this one, but I have another problem.

Regarding: <snip>

I want the #login_box to be on the top right hand side fluent with the rest of the page.

Here's a quick MS Paint rendition of what I want: <snip>

If you would, please the page's source as my HTML is semantically easy-reading (although my CSS may not be).

Basically I want advice on how I should code #login_box to position it where I want. This is my first time using CSS, so excuse my fundamental questions. :)

Thanks a lot!

[edited by: encyclo at 1:31 am (utc) on Dec. 28, 2006]
[edit reason] no personal URLs please, see forum charter [/edit]

[Robin_reala]

Sorry, I don’t usually do code snippet posts but here I was in a rush. The idea is that absolutely positioned elements calculate their position from the nearest positioned ancestor (or, if one is not available, the root node). An element is ‘positioned’ if it was a CSS position setting of absolute, relative, or fixed. In this case we make the parent position:relative, then #nested_header will calculate its position relative to #header.

Regarding your second question, I’m afraid we don’t do site reviews here for various reasons, but if you can post a small example of where you’ve got to and a decription of what you want I’ll try to help.

[cmarshall]

neumadr,

Just to let you know, some moderator will be along and will delete your URIs. We're not allowed to reference our own sites in any way.

I get mine spanked all the time. It's hard to toe the line perfectly.