Overlay div over another div?

Your markup won't allow the margin-bottom trick to work since your logo div is nested in a different set of elements You'll have to position the logo absolutely and place it relative to a parent element that wraps both the logo div and the banner div jsfiddle.net/DOSBeats/NXgq6 Here is an example using position:absolute In the example I didn't use position:relative on a parent element, but if you are using a grid system I would check to make sure the main row or container-(12||16) has the position:relative property set This will ensure any left:15px; top:25px will be centered with the rest of the content EDIT: After reviewing your code here is how you need to update your CSS/HTML Remove all references to position:relative from header and headerContent After your wrap div you'll need to add another div class="container and close it off just before the div that closes the wrap element Change overflow:auto to overflow:hidden on your headerContent element to get rid of the scroll bars to the far right.

Your markup won't allow the margin-bottom trick to work since your #logo div is nested in a different set of elements. You'll have to position the logo absolutely and place it relative to a parent element that wraps both the #logo div and the . Banner div.

jsfiddle.net/DOSBeats/NXgq6/ Here is an example using position:absolute. In the example I didn't use position:relative on a parent element, but if you are using a grid system I would check to make sure the main . Row or .

Container-(12||16) has the position:relative property set. This will ensure any left:15px; top:25px; will be centered with the rest of the content. EDIT: After reviewing your code here is how you need to update your CSS/HTML.

Remove all references to position:relative from #header and #headerContent After your #wrap div you'll need to add another and close it off just before the that closes the #wrap element. Change overflow:auto to overflow:hidden on your #headerContent element to get rid of the scroll bars to the far right.

Thank you very much for the illustrative example! However, I still can't get it to work, using absolute positioning either. I am trying to use a framework (but starting to regret it), Blueprint.

But each ancestor div does have position:relative set, which they should if I understand you correctly? I also have a "wrap" div (with position:relative) that wraps both the logo and the banner, but it is not an immediate parent of either. But as far as I can see from your example they don't have a common immediate parent their either, right?

How come your example works, but my stuff doesn't...? – Anders Svensson Jul 17 at 0:46 An absolutely positioned element will get it's starting point from the closets parent element who's position is set to relative. I would only have the main parent element set to relative. Can you post a link somewhere so I can check it out?

I'll be able to better give you direction if I can see live code. A quick way to understand it is by saying "I am absolutely positioning x element relative to y element" – Seth Jul 17 at 4:04 Sure here's the address: testserver.dita.nu/Home/Test. Only that page is relevant, the other ones on the site haven't been rewritten to fit blueprint yet.

– Anders Svensson Jul 17 at 9:10 I updated my above post to help you achieve your goal. Let me know how it works out. – Seth Jul 17 at 12:43 Well, it did accomplish getting the logo outside and above, and it got rid of the scroll bars, but there's a problem: because I removed position:relative on the headerContent, the logo doesn't seem to be absolutely positioned relative to the headerContent anymore, which means it is placed outside it (to the left), and out of its flow.

And this means the entire menu is shifted left (to the place where the logo should be)... – Anders Svensson Jul 17 at 20:09.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions