Welcome to WebmasterWorld Guest from 54.205.89.199

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)

Full Member

10+ Year Member

joined:Feb 4, 2004
posts:305
votes: 0


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)

Junior Member

10+ Year Member

joined:Mar 14, 2006
posts:58
votes: 0


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)

Full Member

10+ Year Member

joined:Feb 4, 2004
posts:305
votes: 0


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)

Full Member

10+ Year Member

joined:Feb 4, 2004
posts:305
votes: 0


Hi Marc,

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

Arjan

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members