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 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2004
    Posts
    96
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Positioning one div relative to another div

    Hi,

    I am working on a site where I don't have access to the HTML (its dynamically driven), only the CSS. I have a <div> towards the top of my page and with the id "mylinks" and another <div> down towards the bottom with the id "mycontent" is it possible to position the div towards the top 250px beneath the 2nd div and 150px to the left of it? ie. positioning one named div relative to another div further down the page?

    Thanks in advance

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please post your current code and explain on the basis of that.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Sep 2004
    Posts
    96
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The HTML code is a bit messy and that is what is causing my problem. Basically I need to position the div with the id "mylinks" relative to the div further down the page "mycontent" - is this possible?

    Code:
    <table><tr><td width="200"><div id="mylinks"></div></td></tr><tr><td><div id="mycontent"></div></td></tr></table>

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Table-based page layout = bad.

    Nest the divs, set the outer one to position:relative and the inner one to position:absolute.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Div Position</title>
    
    <style type="text/css">
    
    * {
    	border:0px;
    	padding:0px;
    	margin:0px;
    	color:#fff;
    }
    
    #mylinks {
    	position:relative;
    	width:500px;
    	height:200px;
    	background:#f00;
    }
    
    #mycontent {
    	position:absolute;
    	top:250px;
    	left:150px;
    	width:300px;
    	height:200px;
    	background:#000;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="mylinks">
    
     <p>My Links</p>
    
     <div id="mycontent">
     
      <p>My Content</p>
     
     </div>
     
    </div>
    
    </body>
    </html>
    Adjust all pixel values to suit.
    Last edited by BoldUlysses; 07-31-2008 at 02:36 PM.
    matt | design | blog

  • #5
    New Coder
    Join Date
    Sep 2004
    Posts
    96
    Thanks
    1
    Thanked 0 Times in 0 Posts
    wonderful thanks that worked


  •  

    Posting Permissions

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