CSS with floating div above wrapper

Hi -

Sorry if this might be a basic CSS question - but I'm more of a PHP/database guy that's had some CSS jobs thrown at me...so looking for a little bit of help.

I've got a layout I need to make...where there's a centered content DIV (I'm assuming that's done via margin-left:auto, margin-right:auto...?

That DIV needs to be flush (top = 0) with the top of the browser window as that's where the nav/hero image is.

The design, however, has a floating PNG that's supposed to hang out above that div, offset a bit to the left.  I'm not sure what's the best way to do that.  Should the content DIV be it's own wrapper - encapsulated within ANOTHER wrapper that has the transparent PNG within it?  And if so - how do you keep it properly centered then?  Also - I've heard that using negative values is a sign of bad CSS - so - I'm trying to avoid that (if true)

Any help would be appreciated.  Here's a rough sketch of what it's supposed to look like.

Thanks in advance!

Sketch layout
Who is Participating?
bigeven2002Connect With a Mentor Commented:
Sorry I should have clarified the DIV positioning, from your demo image above, let's say the  box is the outer DIV with a static width of 300px and is centered with 0 auto and has a position of relative.  The DIV must have has a static width.

So if the image resides inside the DIV, the image's absolute position will be align within the outer DIV since it is relative, so even if you resize the browser, the image will stay where it's supposed to.

This is also where negative values play a role.

<!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
<style media="all" type="text/css">
div { width: 300px; margin: 0 auto; border:1px solid black; position:relative; padding-right:10px; }
img { position:absolute; left:-75px; top:0px; z-index:999; }
h2 { font-weight:bold; padding-left: 100px; }
p { font-weight:bold; padding-left: 100px; }


    	<img src="csstest.png" width="150" height="150" />
      	<h2> Lorem ipsum </h2>
       	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Open in new window

css test

I can probably help with some of this.  First, on your centering question, that sounds right but I would use this instead:
.centered-div { margin: 0 auto; }

Open in new window

This will center the DIV and give it a top margin of 0 (flush) and is the proper shorthand to do so.

For the PNG image to show offset like that, either a position absolute and z-index may help.  The position absolute will keep the image in a fixed location on the page, so even if you scroll the page, it will stay put in the browser.  This position type is meant to have pixel position specified with it.
.image { position:absolute; top:50px; left: 40px; z-index:999; }

Open in new window

The z-index is used to layer the page, so by default all elements have a z-index of 1.  If an element has a higher number, it will show up on top of other layers.

Below is a link on a similar issue which may help on the image:


Lastly, negative values in CSS are not bad at all.  Some web designers use it to create dynamic navigation elements such as hovering over a text or image to make a menu appear.  What is happening is the negative value renders that menu off screen and re-positions it over that text or image when the mouse hovers over it.  It is ideal for those that don't want to use JavaScript in their navigation elements.
erzoolanderAuthor Commented:
Cool - thanks for the info on the negative values.

Only issue that I have from reading the solution is that the transparent PNG needs to move to remain in the same position relative to the centered div it's laying on top of.  

From my understanding of CSS - what you're proposing will give it an absolute value - which will cause it to be in a different spot relative to the obscured content div when the browser is resized...?

or am I misreading the CSS (won't have a chance to tinker with it until the morning)
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Ishaan RawatDesigner | Developer | ProgrammerCommented:
Check this... Exactly what you want...

Ishaan RawatDesigner | Developer | ProgrammerCommented:
Mine didn't worked???
erzoolanderAuthor Commented:
My apologies - yours worked as well.  I just picked the first one I saw and then didn't see a way to divy it up.  :)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.