Border between 2 columns

with height of the longest of the two

[adb64]

I have a layout within my page with 2 columns and I want a border between them with the length of the longest of these two columns. I now have the following CSS:

#content { 
 width: 690px; 
} 
#content .blockleft .text { 
 float: left; 
 width: 427px; 
 padding-right: 5px; 
 border-right: 3px solid silver; 
} 
#content .blockright .text { 
 float: right; 
 width: 427px; 
 padding-left: 5px; 
 border-left: 3px solid silver; 
} 
#content .blockleft .attr { 
 float: right; 
 width: 255px; 
} 
#content .blockright .attr { 
 float: left; 
 width: 255px; 
} 

And this HTML:

<div id="content"> 
<div class="blockleft"> 
<div class="text"> 
Some text... 
</div> 
<div class="attr"> 
[May contain images, text, metadata, etc] 
</div> 
</div> 

'blockleft' and 'blockright' are used to swap the position of the two columns.
Either one of the two colums 'text' or 'attr' is the longest and I want the border in between them to run from top to bottom of the outer 'blockleft' or 'blockright' class. With above CSS/HTML it has the height of the 'text' column. At forehand I don't know which of the two will be the longest.
How can I accomplish this using CSS?

Thanks,
Arjan

[evo81]

Hey Arjan,

Try setting a height to the main container in px or em but not a percentage.

Then, assign height:100%; to your border div.

Good Luck

[adb64]

Hi,

thanks, but that won't work in my situation. Within the 'content' class I can have multiple 'blockleft' and/or 'blockright' divs. Even in between two of those blocks there can be other text or images not contained within a 'blockleft' or 'blockright' div.

Arjan

[adb64]

Hi Marc,

Thanks for the links, I will check the site and try it tomorrow. Hope it will fit my needs.

Arjan