Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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...

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

610 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