Tweet
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.
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?
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.
Code:
<!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>
I'm really out of ideas. Anyone able to lend me a hand?
Comment