johnmerlino
05-11-2010, 01:47 AM
Hey all,
I'm having a serious issue. I have a sidebar floating left. I have a div in the sidebar which contains an unordered list and the div has position relative. The ul in the div has position absolute. I want the list items to extend outside of the sidebar. But rather than extending outside of sidebar, they are being pushed below the sidebar div that is floating left:
css:
#sidebar {
width: 150px;
float: left;
background: #59a96b url(sidebarGrad.png) top left repeat;
border-right: 1px solid #ababab;
}
#sideLinks {
position: relative;
margin: 20px 0 0 20px;
}
#sideLinks > ul {
position: absolute;
left: 50px;
list-style: none;
margin: 0;
padding: 0;
}
html:
<div id="sidebar">
<div id="careerOpp">
<p><a href="careers.html">Career Opportunities</a></p>
</div>
<div id="sideLinks">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
I attached a visual of what is occurring. Thanks for any response.
I'm having a serious issue. I have a sidebar floating left. I have a div in the sidebar which contains an unordered list and the div has position relative. The ul in the div has position absolute. I want the list items to extend outside of the sidebar. But rather than extending outside of sidebar, they are being pushed below the sidebar div that is floating left:
css:
#sidebar {
width: 150px;
float: left;
background: #59a96b url(sidebarGrad.png) top left repeat;
border-right: 1px solid #ababab;
}
#sideLinks {
position: relative;
margin: 20px 0 0 20px;
}
#sideLinks > ul {
position: absolute;
left: 50px;
list-style: none;
margin: 0;
padding: 0;
}
html:
<div id="sidebar">
<div id="careerOpp">
<p><a href="careers.html">Career Opportunities</a></p>
</div>
<div id="sideLinks">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
I attached a visual of what is occurring. Thanks for any response.