SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning Sibling Elements

    I have 2 sibling divisions within a parent division. How can I make those 2 sibling elements both position in the top left corner of the parent division. The second division either positions below the first, or if I use absolute positioning, it references off the top left corner of the page instead of the top left corner of the parent division.

    Can you help?
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    float left

    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>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	*{margin:0;padding:0;}
    	.wra{background:#ffffcc;}
    	
    	* html .wra,* html .he{height:1%;}
    	
    	.he{background:#ccffff;float:left;}
    	.lo{background:#ccffcc;float:left;}
    	
    	head+body .he:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	
    	.wra p{padding:5px;margin:0;}
    	
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    
    <body>
    <div class="wra">
    
    <div class="he"><p>some text</p></div>
    
    <div class="lo"><p>some more text</p></div>
    
    </div>
    
    </body>
    </html>

  3. #3
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but the second sibling element still doesn't position in the top left corner of the parent sibling. It comes after the first sibling element.
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    OK

    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>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	*{margin:0;padding:0;}
    	.wra{background:#ffffcc;position:relative;}
    	
    	* html .wra,* html .he{height:1%;}
    	
    	.he{background:#ccffff;position:absolute;left:0;top:0;}
    	.lo{background:#ccffcc;float:left;}
    	
    	head+body .he:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	
    	.wra p{padding:5px;margin:0;}
    	
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    
    <body>
    <div class="wra">
    
    <div class="he"><p>some text</p></div>
    
    <div class="lo"><p><br /><br />some more text<br /><br /><br /></p></div>
    
    </div>
    
    </body>
    </html>

  5. #5
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help!
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.


Bookmarks

Posting Permissions

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