CSS with floating div above wrapper

Posted on 2013-06-02
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 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)

Expert Comment

by:Ishaan Rawat
ID: 39215380
Check this... Exactly what you want...
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

LVL 17

Accepted Solution

bigeven2002 earned 500 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

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 Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now