...

View Full Version : absolute positioned list items dropping below div



johnmerlino
05-11-2010, 02: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.

code beginner
05-11-2010, 03:32 AM
it sounds like you're wanting two elements to battle it out. you want the one element to go past the border of the other. but that other one has a rule to not do that. so it's placing the extra content where it wants to, but where it wants to place the extra content is not where you want it to go.

the best way i know of to create "conflicts" that work the way you want them to is to set up a variety of absolutely-positioned divs. then use the z-index to determine which one gets superimposed over the other one.

if it will work with your structure, try setting everything in that area to absolute, and then set the one you want to go over the top to a lower z-index value.

there might be a less drastic change to your current coding. but that should work if other methods don't.

johnmerlino
05-11-2010, 12:22 PM
Removing absolute positioning all together and just using relative on the nested div seems to have worked for now. I still don't understand why the content was dropping.

"Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position."

Does this mean content in the float can only be shifted relatively, but if shifted absolutely it drops?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum