Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    absolute positioned list items dropping below div

    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:

    Code:
    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.
    Attached Thumbnails Attached Thumbnails absolute positioned list items dropping below div-codingforumssite.jpg  

  • #2
    Regular Coder
    Join Date
    Sep 2009
    Posts
    167
    Thanks
    15
    Thanked 1 Time in 1 Post
    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.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    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?
    Last edited by johnmerlino; 05-11-2010 at 11:49 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •