SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot miner2049er's Avatar
    Join Date
    Apr 2004
    Location
    Somewhere Out There
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question DIVs not pushing down subsequent DIV

    I'm having a problem inserting two DIV columns (left and right) inside another DIV to get a result like the following image:

    http://www.geocities.com/simonc1204/image.htm


    What happens is that the DIVs extend outside of their containing block and into the footer below, rather than pushing it down, like so:

    http://www.geocities.com/simonc1204/bad.htm


    But, when I replace the two DIVs with some placeholder text, that works OK, with the footer being pushed down, as in:

    http://www.geocities.com/simonc1204/good.htm


    I would have thought that wrapping the two DIVs (which are absolute positioned) in a container DIV would make other block elements flow before and after them, but apparently not, and I need to understand CSS a bit more.

    I've reduced the problem to almost its simplest form, and by looking at the small amount of source, I'm wondering if anybody can tell me where I might be going wrong?

    Thanks in advance for any replies.

    Miner2049er.

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolutely positioned DIVs are removed from the document flow, so you can't enclose them in a container DIV in any meaningful way.

    You could achieve the same effect by floating those two DIVs, and using overflow: auto on the container.

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

    remove the absolute positioning
    do not use relative but use float and clear the float

    your page

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    
    #main
    {
    		padding:	5px 5px 5px 5px;  
    }
    
    #main .content
    {
    	padding:		10px 10px 10px 10px;  
    }
    
    #subwrap
    {
    	position: 		relative;
    	border: 		2px orange solid;
    }
    
    #foot
    {
    	position:		relative;
    	clear:			both;
    	border: 		2px green solid; 
    }
    
    #foot .content
    {
    	padding: 			10px 10px 10px 10px;
    }
    
    #leftbox
    {	position: 		relative;
    	border: 		2px dashed red;
    	/* position: 		absolute; */
    	left: 			100px;
    	top: 			10px;
    	width: 			200px;
    	height:			auto;
    }
    
    #rightbox
    {	position: 		relative;
    	border: 		2px dashed blue;
    	/* position: 		absolute; */
    	left: 			400px;
    	top: 			10px;
    	width: 			100px;
    	height:			auto;
    }
    	.fl{float:left;}
    	.fr{float:right;}
    	.fcl{clear:both;}
    </style>
    
    </head>
    
    <body>
    
    
    <!-- BEGIN subwrap -->
    <div id="subwrap">
    
    <!-- BEGIN main -->
    <div id="main">
    
    <!-- BEGIN content -->
    <div class="content">
    
    <div id="leftbox" class="fl">
    LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT 
    </div>
    <!-- END leftbox -->
    
    <div id="rightbox" class="fl">
    RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
    </div>
    <!-- END rightbox -->
    <div class="fcl"></div>
    </div>
    <!-- END content -->
    
    </div>
    <!-- END main -->
    
    </div>
    <!-- END subwrap -->
    
    <!-- BEGIN footer -->
    <div id="foot">
    
    <div class="content">
    footer content
    
    </div>
    <!-- END content -->
    
    </div>
    <!-- END footer -->
    
    </body>
    </html>
    test page to play with borders margins and paddings

    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" />
    	<!-- <meta http-equiv="Refresh" content="5; URL="> -->
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0px;/* no margins body */
    	padding:0px;/* no padding body */
    	height:100%;
    	}
    	
    	.con{margin:0 auto 0 auto;width:754px;}/* main container */
    	
    	/* c for color */
    	.c{background:#fcfcfc}
    	.cb{background:#eaeaea;}
    	.cc{background:#d8d8d8;}
    	.cd{background:#c6c6c6;}
    	.ce{background:#b4b4b4;}
    	.cf{background:#a2a2a2;}
    	
    	.cg{background:#e7ffe7;}
    	.ch{background:#ffe7ff;}
    	.ci{background:#ffffff;}
    	
    	/* general */
    	div,p,span,b,a,br{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:11px;
    	color:#000000;
    	margin:0px;
    	padding:0px;
    	text-align:left;/* to get text back to the left*/
    	font-weight:100;
    	}
    	
    	.fl{float:left;}
    	.fr{float:right;}
    	.fcl{clear:both;}
    	
    	/* padding */
    	.p{padding:10px;}
    	.pb{padding:2px;}
    	
    	/* margin */
    	.ma{margin-left:auto;margin-right:auto;}
    	
    	.mt{margin-top:10px;} /* */
    	.ml{margin-left:10px;}
    	.mr{margin-right:10px;}
    	.mb{margin-bottom:10px;}
    	
    	.mtt{margin-top:3px;} /* */
    	.mlt{margin-left:3px;}
    	.mrt{margin-right:3px;}
    	.mbt{margin-bottom:3px;}
    	
    	.mlin{margin-left:10px;}
    	.mrin{margin-right:10px;}
    	
    	/* b general border color style */
    	.b,.bu,.bf,.bn,.bx,.bo,.blr,.bt,.bl,.br,.bb{
    	border-color:#000000; /* b general border color  */
    	border-style: solid; /* b general border type  */
    	}
    	/* b  border size 1px */
    	.bu{border-width: 0px 1px 1px 1px;}
    	.bn{border-width: 1px 1px 0 1px;}
    	.b{border-width: 1px 1px 1px 1px;}
    	.bo{border-width: 1px 0 1px 0;}
    	.bt{border-width: 1px 0px 0px 0px;}
    	.bb{border-width: 0px 0px 1px 0px;}
    	.blr{border-width: 0px 1px 0px 1px;}
    	
    	.w,.w .fl,.w .fr{width:140px;}
    	
    	.wcbc{width:756px;}
    	.wconx{width:736px;}
    	.wlc{width:559px;}
    	.wlcl{width:401px;}
    	.wlbl{width:504px;}
    	</style>
    	
    	<!--[if IE]>
    	<style type="text/css">
    	html .mrop{margin-right:0px;}
    	html .mr{margin-right:5px;}
    	html .ml{margin-left:5px;}
    	</style>
    	<![endif]-->
    	
    </head>
    <body class="cf">
    <!-- <div class="con mt bn">sub header<br /></div> -->
    <div class="wconx cc bn p ma mt">
    <div class="cg b p"><br /><br />header<br /><br /><br /></div>
    </div>
    <!-- <div class="con wcbc cd bt">menu<br /><br /></div> -->
    
    <div class="con wcbc cc bu mb">
    
    <div class="cc">
    
    <!-- container left colum -->
    <div class="wlc fl p b ch ml">
    <div class="w ci fl b"><span class="mtt mlt fl">left text text text text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></span></div>
    
    <div class="wlcl ci fl b mlin"><span class="mtt mlt fl">leftm text text text text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></span>
    </div>
    
    </div>
    
    <!-- container rigt colum -->
    <div class="w fr ml b mr mb">
    <div class="w cg fr"><span class="mtt mlt fl">right text text text text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></span></div>
    </div>
    
    <div class="wlc cg fl b p ml mt mb">12345<br /><br /><br /><br /><br /><br /></div>
    
    <!--  -->
    <div class="fcl"></div>
    </div>
    </div>
    <div class="fcl"></div>
    <p class="x"><br /></p>
    </body>
    </html>


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
  •