...

View Full Version : Stretching of divs positioned next to each other



snowieken
04-10-2009, 05:23 AM
I finally might have encountered a problem where I need to use a table. You guys are my last hope.

I have two divs positioned next to each other in a container div. They don't need to have 100% height, but either the container div, either the left div needs to stretch when the right div is being expanded by extra content.

I'll try to reproduce my problem in a simple page to make it clear.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
body,html
{
height:100%;
width:100%;
margin:0px;
}
div.container
{
background-color:Red;
}
div.left
{
width:50%;
background-color:yellow;
float:left;
}
div.right
{
background-color:green;
width:50%;
float:right;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Left text
</div>
<div class="right">
Right text
<br />
The left div should stretch with this one.
</div>
</div>
</body>
</html>

So when text is added to the left or the right div, either the container div, either the div next to it needs to stretch to the same height, whichever is easier to achieve. Adding heights doesn't help when the content exceeds that height.

I'm really out of ideas. Anyone able to lend me a hand?

snowieken
04-10-2009, 06:39 AM
Nevermind, adding a div with clear:both inside the container div seemed to have done the trick...

Excavator
04-10-2009, 05:43 PM
Hello snowieken,
Some things that might help you here.

Instead of adding a useless div to clear floats, try overflow:auto; - this tutorial explains. (http://www.quirksmode.org/css/clearing.html)

To make an equal height 2column layout, no matter which column has more content, check out faux columns (http://www.alistapart.com/articles/fauxcolumns/).
Here's a 3 column example - http://nopeople.com/CSS/faux_columns/index.html

And here's an example using only background colors. This method would work well with the code you posted - http://nopeople.com/CSS/equal_length_columns/index.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum