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)
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39215380
Check this... Exactly what you want...
What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

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
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

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

770 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