DIVs not pushing down subsequent DIV

**miner2049er** · May 10, 2005 23:01

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.

**Buddy Bradley** · May 11, 2005 00:42

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.

**all4nerds** · May 11, 2005 01:13

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>

User Tag List

Thread: DIVs not pushing down subsequent DIV

Thread Tools

Display

Hybrid View

DIVs not pushing down subsequent DIV

Bookmarks

Bookmarks

Posting Permissions