Forcing floated div downwards when above div overflows

**redhillccwebmas** · Apr 2, 2006 10:59

Hi there,

I am have a simple CSS layout however, I am running into a problem where I want to force a div down as another div above increases in height with text.
The two divs in question are #main and #featured ; I would like the #featured div to be forced down the page when the #main div fills up with text.

At the moment, when the #main div fills with text, the text overlaps the #featured div.

Thanks for any help or advice you may have.

HTML;

----------------------------------------

<div class="container">
<div id="header"></div>
<div id="body_text">wow great work James</div>
<div id="main">
<p>great work James on this project - It is brilliant</p>
<p>lllll</p>
<p> </p>
<p> </p>
<p> </p>
<p>m</p>
<p>nm</p>
<p>m</p>
<p>nm</p>
<p>nm</p>
<p>nm</p>
<p>nm</p>
<p>nm</p>
<p>nm</p>
<p>nm</p>
<p> </p>
<p>jhjk</p>
</div>
<div id="links">

<div id="links_text">
<p>Hello this is great and it works really well</p>
<p> </p>
<p> </p>

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

</div>

<div id="featured">
<p>Wow, this works excelentally</p>
<p> </p>
<p> </p>
<p>f</p>
</div>
</div>
</div>

--------------------------

CSS:-

body {

margin-top:5px;

}

*{margin:0;padding:0;}

div{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}

.container{
margin: 0 auto;
width:750px;
background:url(images/bg.png);
}

#header{
height:170px;
width:100%;
background:url(images/header.png);

}

#links{
height:100%;
width:120px;
background:url(images/links.png) no-repeat;
padding-left:15px;
padding-right:15px;
padding-top:15px;
margin-top:15px;
}

#links_text{
width:100px;
height:257px;
}

#featured{
width:750px;
height:205px;
background:url(images/featured.png) no-repeat;
}

#body_text{
width:151px;
height:257px;
background:url(images/highlight.png);
float:right;
margin-top:15px;
}

#main{
width:440px;
float:right;
margin-top:15px;
}

----------------

Kind Regards

James

**all4nerds** · Apr 2, 2006 11:44

Hello

great work James on this project - It is brilliant

eXtended columns

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;}
	
	body {margin-top:5px;}

	div{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}

	.container{
	margin:0 auto;
	width:750px;
	background:#ccffff url(images/bg.png);
	}
	head+body .container{overflow:hidden;}

	#header{height:170px;background:#ccffcc url(images/header.png);}
	
	#links,#body-text,#main{float:right;width:150px;margin-top:15px;}
	
	#links{background:#ffffcc url(images/links.png) no-repeat;}
	
	#header p,#links-text,#main p,#body-text p{padding:15px 15px 0 15px;}
	#links-text p{padding:0 0 15px 0;}

	#body-text{background:#ffff99 url(images/highlight.png);}

	#main{background:#ff6600;width:450px;}

	#featured{
	clear:both;
	height:205px;
	background:#ccff99 url(images/featured.png) no-repeat;
	position:relative;
	}
	#featured p{padding:10px;}

	.ex{padding-bottom:32767px;margin-bottom:-32767px;}

	</style>
	<script type="text/javascript">
	function is(){
	agent = navigator.userAgent.toLowerCase();
	this.o8 = (agent.indexOf("opera 8") != -1);
	}
	var is = new is();
	if (is.o8) //alert("Opera8") +
	document.write('<style type="text/css">head+body .ex:after{content: ".";display:block;background:inherit;height:0;margin-bottom:-32767px;padding-top:32767px;}.ex{padding:0 0 0 0;margin:0 0 0 0;}</style>');
	</script>
</head>
<body>
<div class="container">
<div id="header"><p>v25 eXtended</p></div>

<div id="body-text" class="ex">
<p>wow great work James</p>
<p>left

<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 /><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 /><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 /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
end</p>
</div>

<div id="main" class="ex">
<p>great work James on this project - It is brilliant</p>
<p>left
<!--
<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 /><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 /><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 /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  -->
end</p>
</div>

<div id="links" class="ex">

<div id="links-text">
<p>Hello this is great and it works really well</p>
<p>left
<!--
<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 /><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 /><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 /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  -->
end</p>
</div>

</div>

<div id="featured">
<p>Wow, this works excelentally</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>f</p>
</div>
</div>

</body>
</html>

**redhillccwebmas** · Apr 2, 2006 12:43

Thanks all4nerds again for your help; I feel I am slowly starting to get better at CSS layouts and your help especially is invaluable to me.

I had to make a few changes to your code, but it now looks just how I want it to. Just a couple of questions though- how come u changed my DocType from HTML 4.0 Transitional to XHTML Strict? And also what is the added Javascript for?

Thanks again

Jame

**all4nerds** · Apr 2, 2006 12:48

Hello

Doctype is only importend to get IE in the same box-model as FF NS Moz OP, change it back to html 4.01 strict if you like

JavaScript is for OP 8 8.5 only since You want to use bgr. images

**redhillccwebmas** · Apr 3, 2006 08:18

Thanks all4nerds for your help, but I have the same problem now, but with a different div as I am creating another page.

I would like the div id="no-featured" to be forced down when the div id="main" has text within it.

I have tried to follow your method for correcting the previous problem, however to no avail.

Would really appreciate your help

Code is below (I am sure you know it off by heart now, all4nerds!):-

/* ALL PAGES */

*{margin:0;padding:0;}

body {margin-top:5px;}

div{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}

.container{
margin:0 auto;
width:750px;
background:#ccffff url(images/bg.png);}

/* FONTS */

.featured_title{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;}

.featured_content{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;}

.links {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #ffffff;
font-weight: bold;
}

head+body .container{overflow:hidden;}

#header{height:170px;background:#ccffcc url(images/header.png);}

#links,#main{float:right;width:150px;height:257px;margin-top:15px;}

#links{background:#ffffcc url(images/links.png) no-repeat;}

#header p,#links-text,#main p,#body-text p{padding:15px 15px 0 15px;}

/* SOME PAGES - RIGHT HAND FEATURE */

#body-text{float:right;width:150px;height:257px;margin-top:15px;}

#body-text_title{width:100px;margin-top:15px;margin-left:46px;margin-top:9px;}

#body-text_flag{width:100px;height:80px;margin-left:35px;background:url(images/eng_flag.png);}

#body-text_content{width:115px;margin-left:35px;margin-top:28px;}

.links_text{
width:100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
margin-bottom:-4px;

margin-left:10px;margin-top:15px;}

#links_text_home{}
#links_text_products{}
#links_text_contactus{}
#links_text_links{}
#links_text_gb{}

#body-text{background:#ffff99 url(images/highlight.png) no-repeat;
height:257px;}

#main{background:ffffff;width:450px;float:right;}

#featured{
clear:both;
height:205px;
background:#ccff99 url(images/featured.png) no-repeat;
position:relative;}

#featured p{padding:10px;}

.ex{padding-bottom:32767px;margin-bottom:-32767px;}

#no-featured{
clear:both;
height:50px;
background:url(images/no-featured.png) no-repeat;
position:relative;}

/* INDEX.HTML */

#boy_pic{
width:158px;
height:241px;
float:left;
}

------------------------

HTML:-

<!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" />

<link href="style.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
function is(){
agent = navigator.userAgent.toLowerCase();
this.o8 = (agent.indexOf("opera 8") != -1);
}
var is = new is();
if (is.o8) //alert("Opera8") +
document.write('<style type="text/css">head+body .ex:after{content: ".";display:block;background:inherit;height:0;margin-bottom:-32767px;padding-top:32767px;}.ex{padding:0 0 0 0;margin:0 0 0 0;}</style>');
</script>
</head>
<body>
<div class="container">
<div id="header"><p>v25 eXtended</p></div>

<div id="body-text" class="container">
<div id="body-text_title" class="featured_title">Find your flag!</div>
<div id="body-text_flag"></div>
<div id="body-text_content" class="featured_content">We stock all 32 flags from the countries taking part! All our flags feature glow sticks as poles which light up for up to 24hrs!</div>
</div>

<div id="main" class="ex">

This was amaxing work great and exillerating. Lorem ipsum dolor sit amet I my family is the bext and lives in Southapmton. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin odio. Nam varius. Ut adipiscing consectetuer eros. Nulla non neque. Curabitur viverra, orci a rhoncus pellentesque, lectus tortor placerat felis, eget molestie velit neque et urna. Mauris adipiscing. Nam quam justo, tincidunt eget, dignissim nec, faucibus a, ipsum. Proin molestie, orci sit amet ultricies fringilla, diam risus luctus enim, at commodo augue purus ac neque. Duis vitae neque vel leo porta facilisis. Suspendisse potenti.

Pellentesque non quam id tortor congue rhoncus. Curabitur tempus tempus ligula. Vivamus hendrerit cursus felis. Sed ultrices magna non enim. Vestibulum leo magna, interdum a, gravida sed, nonummy in, nibh. Donec risus lorem, tincidunt eu, dictum sed, luctus aliquet, augue. Integer lacinia scelerisque ipsum. Donec condimentum, nunc a consectetuer dapibus, justo lacus molestie nunc, a dictum mi nisl dictum nisl. Praesent odio. Integer fringilla lectus vitae sapien. Nulla vehicula turpis id velit facilisis mattis. Sed molestie, enim sed placerat ullamcorper, nulla nibh rhoncus tortor, id varius dolor metus sed ligula. Vestibulum lobortis metus a arcu. Ut laoreet lacus eu nisl. Ut augue.Cras felis. Fusce gravida, lacus ac pharetra auctor, tortor sem euismod neque, vitae lacinia arcu mauris a est. In arcu dolor, vestibulum ut, placerat non, viverra nec, metus. Fusce pharetra erat ac felis. Morbi scelerisque massa vel dolor. Phasellus eget est a lectus volutpat congue. Aliquam gravida. Proin mi mi, pulvinar vehicula, sollicitudin ac, sagittis vel, libero. Sed aliquam volutpat pede. Proin ut sem at dui luctus suscipit. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut diam

</div>

<div id="links" class="container">
<div id="links_text_home" class="links_text">Home</div>
<div id="links_text_products" class="links_text">Products</div>
<div id="links_text_contactus" class="links_text">Contact Us</div>
<div id="links_text_links" class="links_text">Links</div>
<div id="links_text_gb" class="links_text">Global Distributors</div>

</div>
<div id="no-featured">

</div>

</div>

</body>
</html>

Thanks very much for your help once again

James

**all4nerds** · Apr 3, 2006 08:44

Hello

you set heights on container main ?, the eXtended code you can delete now

#links, #main {float:right;width:150px; height:257px; margin-top:15px;}

#links{float:right;width:150px;height:257px;margin-top:15px;}

#main{background:#ffffff;width:450px;float:right;margin-top:15px;}

PS don't use undescores in your id and class names, its not valid

**redhillccwebmas** · Apr 3, 2006 09:28

thanks once again all4nerds

User Tag List

Thread: Forcing floated div downwards when above div overflows

Thread Tools

Display

Forcing floated div downwards when above div overflows

Bookmarks

Bookmarks

Posting Permissions