SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member lplatz's Avatar
    Join Date
    Feb 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using absolute positioning inside a floated content

    I have built a two colulmn liquid layout using float left & right columns to allow for a footer to position relative to the longest column.

    Within the right floated column, I inserted two sub-columns, (w/in a wrapper column) using absolute positioning for these columns. This forced the columns to fall below the paragraph material in the floated column.

    My discovery is that the height of the two sub columns and wrapper column does not increase the height of the floated column. Why is this and is there a work around.

    My CSS:
    Code:
    #wrapper {
    	position: relative;
    	margin: 5px auto;
    	text-align: left;
    	width: 800px;
    	background-image: url(images_global/body_background.jpg);
    	background-repeat: no-repeat;
    }
    
    #content {
    	float: right;
    	width: 600px;
    	height: 100%;
    	margin-top: 175px;
    	visibility: visible;
    	}
    
    #leftColumn {
    	float: left;
    	width: 185px;
    	margin-top: 195px;
    	padding-left: 5px;
    	}
    
    #content_sub {
    	position: relative;
    	margin-top: 10px;
    	margin-bottom: 40px;
    	width: 100%;
    	}
    
    #content_sub_L {
    	position: absolute;
    	margin-left: 2px;
    	width: 295px;
    	left: 0px;
    	top: 0px;	
    	}
    
    #content_sub_R {
    	position: absolute;
    	margin-right: 2px;
    	width: 295px;
    	top: 0px;
    	right: 0px;
    	}
    
    HTML CODE
    <div id="wrapper">
    <div id="content">
    <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pellentesque eleifend metus. Etiam varius posuere mi. Fusce vulputate viverra velit. Sed a dolor quis dui dapibus sodales. Etiam dui sapien, euismod at, venenatis nec, venenatis quis, quam. Fusce a velit et nibh eleifend pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas a magna eget nulla placerat luctus. Sed a urna ac libero molestie elementum. Duis eros. Nullam in dui a diam volutpat adipiscing. Nulla dui. Etiam et neque eu metus ullamcorper pretium. Proin interdum. Morbi libero. Proin fringilla, risus non sagittis euismod, odio nisl tempor erat, id varius nibh augue quis pede. 
    </P>
    
    
    <div id="content_sub">
    <div id="content_sub_L">
      <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Proin imperdiet consequat justo.</li>
    <li>Etiam at libero eget nunc dapibus sagittis.</li>  </ul>
      </div>
    	<div id="content_sub_R">
        <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Proin imperdiet consequat justo.</li>
    <li>Etiam at libero eget nunc dapibus sagittis.</li>    
    </ul>
    </div>
    </div>
    <P>Etiam at libero eget nunc dapibus sagittis</P>
    </div>
    <div id="leftColumn">
    <a href="#">Program Details</a>
    </div>
    <div id="footer">
    <?php include ("inc/footer1.php"); ?>
    </div>
    </div>
    Thanks for your advice and expertise.

    Les

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolute positioning effectively removes the element from the normal document flow, and an absolutely positioned element will not be effected by the size or position (other than its nearest positioned parent) of any other element, nor can it exert any influence over the size or position of anything elese. This is one of the reasons why absolute positioning is not really suitable for a general positioning scheme, and one of the reasons why it is so useful for special overlapping effects.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The workaround is just to continue using floats for your extra sub columns because of the issues with absolute positioning that Centauri mentioned above.

  4. #4
    SitePoint Member lplatz's Avatar
    Join Date
    Feb 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent info... thanks for your help!!


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
  •