Welcome to WebmasterWorld Guest from 174.129.151.95

Forum Moderators: not2easy

Message Too Old, No Replies

Border between 2 columns

with height of the longest of the two

   
8:14 pm on May 23, 2006 (gmt 0)

10+ Year Member



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

9:10 pm on May 23, 2006 (gmt 0)

5+ Year Member



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

9:27 pm on May 23, 2006 (gmt 0)

10+ Year Member



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

9:57 pm on May 23, 2006 (gmt 0)

10+ Year Member



Hi Marc,

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

Arjan