SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member Alterscape's Avatar
    Join Date
    Nov 2003
    Location
    NY, USA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clearing beneath absolutely-positioned DIVs?

    I have XHTML code of the following format

    HTML Code:
    <div id="container">
    <div id="col2" class="box3">
    <!--middle column content-->
    </div>
    <div id="col3" class="box3">
    <!--right column content-->
    </div>
    <div id="col1">
    <!--due to accessibility, this comes last->
    </div>
    </div>
    <div id="footer">
    <!--footer content-->
    </div>
    and my CSS looks something like this:
    Code:
    #container {
      width:  60em;
    }
    #col1 {
      position: absolute;
      top: 0em;
      left: 0em;
      margin-right:40em;
    }
    #col2 {
      margin-right: 20em;
    }
    #col3 {
    }
    div.box3 {
      padding: 0em 1em 1em 1em;
      margin: 0em;
      width: 18em;
      height: 100%;
      position: absolute;
      top: 0em;
      right: 0em;
    }
    The idea, in theory, is that col1 is liquid, filling everything except for the space occupied by col2 and col3. This works (on everything but IE<6, where I need to specify the width of col1 to keep things from going pearshaped), but of course the footer div ends up underneath all the other text. Right now I'm avoiding that by specifying a height for the container div, but since the content in these columns is liable to change, I'd rather convince the container that it wants to be as tall as the tallest of the columns.

    Thoughts? I'm open to positioning the columns in another way, but if at all possible I'd like to preserve source-order independence.

    Best,
    Ryan

  2. #2
    SitePoint Member Alterscape's Avatar
    Join Date
    Nov 2003
    Location
    NY, USA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't include all the markup inside the container DIVs to simplify the code for anyone looking at it. In my actual code, each DIV contains a few &lt;p&gt; elements; the contents aren't strictly relavent.

    I want the footer div to be pushed down beneath the content in the absolutely-positioned DIVs. Is there a way to do this, or do I need to rethink my concept to use floats or some other approach?

  3. #3
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I know you want to preserve your source order, but my gut is saying switch your source order, and float the non-resizing columns right... or switch to a table.

    In THEORY you could also try to double-stack right floats on the margin, in the same way "holy grail" and other three column layouts place their right column - not sure how that would work with two columns though.

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here, try this:

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Stack demo</title>
    <style type="text/css">
    * {
    	margin:0px;
    	padding:0px;
    }
    
    body {
    	font-size:16px;
    	line-height:18px;
    	font-family:arial, helvetica, sans-serif;
    }
    
    h1 {
    	display:block;
    	height:64px;
    	font-size:48px;
    	line-height:64px;
    	text-align:center;
    	background-color:#DDE;
    }
    
    #container {
    	padding-right:368px;
    }
    
    #content {
    	position:relative;
    	float:left;
    	width:100&#37;;
    	padding:8px;
    	background-color:#FFE;
    }
    
    #sidelift {
    	float:left;
    	width:352px;
    	margin-right:-368px;
    }
    
    #menu, #sidebar {
    	float:left;
    	width:160px;
    	padding:8px;
    }
    
    #menu {
    	background-color:#EFE;
    }
    
    #sidebar {
    	background-color:#EEF;
    }
    
    #footer {
    	clear:both;
    	height:32px;
    	font-size:16px;
    	line-height:32px;
    	text-align:center;
    	background-color:#FEE;
    }
    
    </style>
    </head><body>
    
    <h1>Document Header</h1>
    <div id="container">
    	<div id="content">
    		<p>test content</p>
    		<p>test content</p>
    		<p>test content</p>
    		<p>test content</p>
    		<p>test content</p>
    		<p>test content</p>
    		<p>test content</p>
    		<p>test content</p>
    		<p>test content</p>
    		<p>test content</p>
    		<p>test content</p>
    		<p>test content</p>
    	</div>
    	
    	<div id="sidelift">
    		<div id="menu">
    			<p>test content</p>
    			<p>test content</p>
    			<p>test content</p>
    			<p>test content</p>
    			<p>test content</p>
    			<p>test content</p>
    		</div>
    		
    		<div id="sidebar">
    			<p>test content</p>
    			<p>test content</p>
    			<p>test content</p>
    			<p>test content</p>
    			<p>test content</p>
    			<p>test content</p>
    			<p>test content</p>
    			<p>test content</p>
    			<p>test content</p>
    		</div>
    	</div>
    </div>
    
    <div id="footer">Test footer</div>
    
    </body></html>
    I think that does what you are asking, ja? It's loosely based on A list aparts 'Holy Grail' layout, containing a simple stack float in the right column, with no left column... which thanks to not using the left column from that technique, it doesn't need any hacks to work cross browser. (and unlike theirs, it works in IE7)


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
  •