homepage Welcome to WebmasterWorld Guest from 54.166.122.86
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

    
Need three columns with the same border height
designer123

5+ Year Member



 
Msg#: 3032566 posted 7:04 am on Aug 3, 2006 (gmt 0)

Hi guys. Let me put my question here. and thanks in advance..

I have a page with three columns of text.
.columnfirst, .columnsecond {
border-right: 1px solid #999;
margin-right: -1px;

First column has the content of 50 lines , second has the content of 25 lines and the third of 20 lines.
As in the style each column has the border given which acts as a separator between the columns, but I want this line to be of same height for all the three columns. Now it takes only the line(border)till the content. Height=”100% doesn’t work

Thnx!
Designer-Dude --------

 

cuce

10+ Year Member



 
Msg#: 3032566 posted 11:27 pm on Aug 9, 2006 (gmt 0)

contain your columns in one container which would have a repeating background image which would give the illusion of the borders, and line an image at the top and bottom to show the top and bottom of the boxes. You'll also have to contain 2 of the columns in its own container and make sure you clear your floats.

like this:

css:
#content{width:800px;}
#firstandsecond{width:400px;float:left;}
#first{width:180px;float:left;}
#second{width:180px;float:right;}
#third{width:180px;float:right;}
.clear{clear:both;}

html
<div id="content">
<div id="firstandsecond">
<div id="first">first column</div>
<div id="second">second column</div>
<div class="clear"></div>
</div>
<div id="third">third column</div>
<div class="clear"></div>
</div>

offline

5+ Year Member



 
Msg#: 3032566 posted 9:16 am on Aug 12, 2006 (gmt 0)

You can try to add this css code to every column

padding-bottom:32767px;
margin-bottom:-32767px;

henry0

WebmasterWorld Senior Member henry0 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3032566 posted 12:12 pm on Aug 12, 2006 (gmt 0)

offline, what is the idea driving your suggestion
I do not understand (I am not a CSS guru) how one negating the other expends any col to match the longest one or helps to be 100% height?

offline

5+ Year Member



 
Msg#: 3032566 posted 6:37 pm on Aug 12, 2006 (gmt 0)

It will not be 100% height, but all columns heights will be equal

blip

5+ Year Member



 
Msg#: 3032566 posted 11:46 pm on Aug 13, 2006 (gmt 0)

What about using a table? Then each of the columns would automatically be the same, as the column with the most content, will naturally drive the height of the other two columns.

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