Dynamically Setting Relative Positioned Div Heights

[andrewmta]

Is it possible? I'll give you an example of my problem and code. I tried searching for an answer but couldn't seem to find a solution. I have a feeling this may be one of the more trafficked CSS problems, so if anyone knows of another thread explaining this please drop me a link.

I'm trying to replace a traditional two column table concept like this:

<table style="border:1px solid #000000;">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>


With a DIV instead, like this:


<style type="text/css">
#container{
border: 1px solid #000000;
}
.columnone{
width: 50%;
position: relative;
float:left;
clear: left;
}
.columntwo{
width: 50%;
border-left: 1px solid #000000;
position: relative;
float:left;
clear: right;
}
</style>

<div id="container">
<div class="columnone">Column 1</div>
<div class="columntwo">Column 2</div>
</div>


The above swap works fine except for two visual problems which may both have the same solution, if one exists.

Using the table, as I add more text content to Column 1, column 2 grows vertically to ensure that column 1 does not spill into the column. In essence as a table, column 2's height is set to 100% of container.

Now I can temporarily fix the problem using the divs by setting both columnone and columntwo's height to height: 100%;, height: auto; may also work.

The problem for me is, that if the content happens to be longer than the display screen of the browser in columnone, the height of the columntwo will end once you begin scrolling down. It seems that when you set height: 100%; it considers 100% to be the visual browser default height and doesn't continue the effect once you start scrolling.

Now I know that this can be fixed by using the mozilla compliant CSS table, but I'm trying to make this cross browser without having multiple versions of the code, or having a div version for firefox and a table for ie.

[ronaldb66]

You could use the container to visually extend the shorter column, which would be far more flexible than this 100% height malarkey. The separating border could be mimicked with a horizontally centered, vertically repeating background on the container (a small vertical line would do, which would still be pretty small as a gif or 8-bit png).

You need to clear the floats though since the container only contains floated content which causes it to collapse in on itself (at least in compliant browsers). For this, look at "How To Clear Floats Without Structural Markup" (http://www.positioniseverything.net/easyclearing.html).

[andrewmta]

There's some misunderstanding here, maybe I am not correct in how I assume clearing works. I'll try another example that is different but contains the same problem.

Let's say that I have two columns of content that I want to display beside each other, vertically aligned to the top of the table.

The left column contains a name for example, and the right column contains a description of that person.

[code]
<style type="text/css">
#container{
border: 1px solid #000000;
}
.columnone{
width: 50%;
position: relative;
float:left;
clear: left;
}
.columntwo{
width: 50%;
border-left: 1px solid #000000;
position: relative;
float:left;
clear: right;
}
</style>

<div id="container">
<div class="columnone">Albert Einstein</div>
<div class="columntwo">A full description of Albert Einstein, his accomplishments in physics, mathmatics, science in general and his childhood dreams.</div>
</div>
[code]

Now, using the code that I've laid above "Albert Einstein" will appear to the left of the first line of Albert Einstein's description but the second, or perhaps third line will end up wrapping underneath the name eventually because columnone has no height set.

Now, my solution would be to give columnone a height that exceeds the height of columntwo which is full of text.

My problem then becomes that columntwo may be filled with text from a database and vary and I do not want to have to manually resize every box.

So is there a way to set columnone's height to match columntwo's height no matter how high columntwo grows? Or am I misunderstanding clearing?

[Xiong Chiamiov]

I don't see how your text would wrap, but...
One solution I've seen to this is to have the 1st (shorter) column be the actual container. Give it a padding-right of the width of the 12nd column and stick the 2nd column inside it, with a padding-left of the width of the text in the 1st. I re-thought this 1/2 way through writing it, so I hope it makes sense to you.

[andrewmta]

I don't seem to be able to get my head around this, maybe because I am so used to working with tables. Can anyone think of somewhere where I might be able to see this sort of problem being solved? Things might be much clearer if I can see the code itself.

Thanks guys.

[jlhaslip]

Set a margin:left on the description to avoid the text running underneath the name.

http://jlhaslip.trap17.com/samples/image_display/index.html

See the "words" class in this sample.

[andrewmta]

Exactly what I needed to get my head around it, thank you!