Solved

floating an image over site using absolute positioning

Posted on 2014-02-12
2
269 Views
Last Modified: 2014-02-12
I work on a mac. Trying to get he display cabinet (on right) to float over navigation bar and image of man working.  I got it to sit nice in some browsers but in other browsers, it goes off the page.  Any advice on keeping the display actually on the website (and not on the wood background)?

http://nsitedesigns.com/nsitedesigns/lakeshore/test.html

Safari screenshot
http://screencast.com/t/HWi2pAq6Q

Chrome screenshot
http://nsitedesigns.com/nsitedesigns/lakeshore/test.html

Firefox screenshot
http://nsitedesigns.com/nsitedesigns/lakeshore/test.html
test.html
0
Comment
Question by:nsitedesigns
2 Comments
 
LVL 8

Accepted Solution

by:
Adrian Crabtree earned 500 total points
ID: 39853939
Hi nsitedesigns,

You need to set your .container to a position: relative. This will then give a bounding box for the img you want to position absolute. Your new CSS for .display and .container would be this:

.container {
  width: 946px;
  background-color: #FFF;
  margin: 40px auto;
  position: relative;
}
.display {
  position: absolute;
  top: 90px;
  right: 20px;
}

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 39853980
Hallelujah!

Should have asked hours ago.  I have been futzing with it for about 2 hours.  Thanks again!
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to count occurrences of each item in an array.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

778 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