Absolutle Positioned Navigation bar in a Float Layout

Posted on 2009-04-07
Last Modified: 2012-05-06
I am trying to get navigation bar to be absolute positioned.  However, when I resize the browser the navbar moves. How do I keep it in place?  See Link
html, body {

  font-family: sans-serif;

  margin: 0;

  padding: 0;

  border: 0;


body { background-color: rgb(250,250,250)};

h1 {

font-family: Trebuchet MS;

font-size: 24px;

font-weight: normal;

color: rgb(47, 79, 79);


#main {

  width: 800px;

  max-width: 1000px;

  height: 600px;


  margin: 2em auto;

  padding: 1em;


#logo {


margin-top: 50px;






#buttons {

	position: absolute;

	top: 184px;

	right: 182px;

	width: 349px;


#footer {

font-size: 70%;

text-align: center;

line-height: normal;

margin-top: 30px;


Open in new window

Question by:Albee_J
  • 2
LVL 13

Expert Comment

ID: 24093058
On the link provided the #button is positioned relative with top of -180px.

Please check and provide feedback


Accepted Solution

Albee_J earned 0 total points
ID: 24095935
I got it to work by futzing around with it.  I changed it from absolute to relative.

Author Comment

ID: 24095949
I posted to quickly in here. Sorry...

Featured Post

Free Trending Threat Insights Every Day

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

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

708 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

13 Experts available now in Live!

Get 1:1 Help Now