View Full Version : absolute position problem.

11-04-2011, 06:02 AM
I wonder why I cant make my list menu with absolute postion exactly at the bottom of my header without any margin. I think its because the link is inside the ul. please show me some solution.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

#main {
margin: auto;
background: #333333;
widows: 900px;
height: 900px;
#head {
position: relative;
height: 200px;
position: absolute;
bottom: 0;

#menu li{
list-style: none;
display: inline;


<div id="main">

<div id="head">

<div id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>




11-04-2011, 06:24 AM
Hello swordsman,
Remove margin by adding this bit to your CSS -
#menu ul {margin: 0;}