homepage Welcome to WebmasterWorld Guest from 54.147.248.118
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Border between 2 columns
with height of the longest of the two
adb64

10+ Year Member



 
Msg#: 9156 posted 8:14 pm on May 23, 2006 (gmt 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

 

evo81

5+ Year Member



 
Msg#: 9156 posted 9:10 pm on May 23, 2006 (gmt 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

adb64

10+ Year Member



 
Msg#: 9156 posted 9:27 pm on May 23, 2006 (gmt 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

adb64

10+ Year Member



 
Msg#: 9156 posted 9:57 pm on May 23, 2006 (gmt 0)

Hi Marc,

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

Arjan

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved