Forum Moderators: not2easy
CSS:
#wrap {
position: relative;
background-color: green;
margin: 0;
}
#header {
background-color: #eee;
}
#content {
position: relative;
text-align: left;
margin: 0 0 0 0;
padding: 0;
background-color: blue;
}
#pagecontent {
margin-left: 130px;
margin-right: 10px;
background: #fff;
padding: 10px;
}
#mainav {
position: absolute;
top: 0;
left: 10px;
background-color: black;
width: 96px;
}
#mainav ul {
padding: 0;
margin: 0;
list-style: none;
}
HTML:
<body>
<div id="wrap">
<div id="header">
Lorem ipsum dolor sit amet..........
</div>
<div id="content">
<div id="pagecontent">
<p>Lorem ipsum dolor sit amet.........</p>
</div>
<div id="mainav">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
</ul>
</div>
</div>
</div>
</body>
any ideas?
ZA
#content {
position: relative;
text-align: left;
margin: 0 0 0 0;
padding: 0;
background-color: blue; height: 100%;
}
Is this because absolute positioning removed the #mainnav from the flow of the document?
It seems i.e. cannot look for a parent, unless I do what you have suggested, and had therefore used the paragraph inside #pagecontent as a surrogate parent
It would be useful to understand why I had this problem if its easy to explain
It works though, thank you very much
ZA
I just started by looking for the likliest solution. The first thing that I did was put some height on all the IDs to see what might break loose, and there it was. Then it just took a second to backtrack and isolate the issue.
Some times it is a bit like finding ones way in the dark, allot of doing things until it works but not always understanding why... often I find I can get my head around css better when I understand the thinking behind it
Thanks again
ZA
