homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Getting right column border to extend down the page?
column borders

5+ Year Member

Msg#: 3821896 posted 2:19 pm on Jan 8, 2009 (gmt 0)

I have the following CSS code in my stylesheet:

#pagecontentleft {float: left;width: 501px;text-align: left;line-
height: 20px;padding: 0;}
#pagecontentleft p {margin: 0;padding: 6px 0px 6px 6px;}
#leftcolumn1 {float: left;width: 249px;height: auto;border-left: 1px solid #F2ECCF;}
#leftcolumn1 p {padding: 0;}
#leftcolumn2 {float: left;width: 248px;border-left: 1px solid
#F2ECCF;border-right: 1px solid #F2ECCF;}
#leftcolumn2 p {padding: 0;}

Here is an example of that section, within a page on the site I am developing. "pagecontentleft" is the main area on the left containing the large photo and text and, below it, the two float regions aligned

As you can see, if the text content of the box on the right is less than the box on the left, the border will not run the full length of the first box, which looks disjointed.

How do I set "leftcolumn2" so that it runs the same length as "leftcolumn1"?
Similarly, if the content of leftcolumn2 is larger than leftcolumn1 then I also need to to be the same size.
I need both areas to be flexible, rather than a specified height, as there will be varying content in both.

Appreciate the help, thanks.

[edited by: eelixduppy at 3:04 pm (utc) on Jan. 8, 2009]
[edit reason] no personal URLs, please [/edit]



WebmasterWorld Senior Member 10+ Year Member

Msg#: 3821896 posted 3:03 pm on Jan 8, 2009 (gmt 0)

Hi nathonjones,

Welcome to WebmasterWorld.

Equal column height is one of the 'hard' thing to achieve in pure CSS. There are workaround that can help you achieve this. The simplest being the 'css faux column' workaround. Try googling it. You should get a lot of article/tuts about how to implement it.

Also please note that links to personal websites are usually not authorised, so your post will probably get edited to remove your URL. Don't take it personally, it's one of the policies that make WebmasterWorld the great place it is. :)

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