CSS with floating div above wrapper

Posted on 2013-06-02
Medium Priority
Last Modified: 2013-06-20
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
Question by:erzoolander
  • 2
  • 2
  • 2
LVL 17

Expert Comment

ID: 39215336

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.

Author Comment

ID: 39215373
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)
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39215380
Check this... Exactly what you want...

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

LVL 17

Accepted Solution

bigeven2002 earned 2000 total points
ID: 39215411
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
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39226802
Mine didn't worked???

Author Comment

ID: 39264813
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.  :)

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question