CODEWITHSUNDEEP
htmlcss
Martin
Martin

Reputation: 2300

CSS 100% height border color

I'm often creating a two (or more) column layout with HTML / CSS and need a separating border. I usually add the border to either the left or the right column, but I need the border, to match the height of the highest column.

I've created a jsFiddle to illustrate this problem: http://jsfiddle.net/rxGUS/

Thanks in advance.

Upvotes: 1

Views: 507

Answers (5)

0b10011
0b10011

Reputation: 18785

Adjusted from Alex's answer to take into account CSS from Twitter Bootstrap. Since the spacing between the two columns is supposed to be 20px (from margin-left:20px;), I added set it to 10px on each side of the border. If you want 20px, simply set the padding-left for .column2 and the padding-right for .column1 to 20px.

.column1, .column2 {
    float:left;
    width: 200px;
}
.column2 {
    margin-left:-1px;
    border-left:1px solid #000;
    padding-left:10px;
}
.column1 {
    border-right: 1px solid #000;
    padding-right:10px;
}

See the jsFiddle example with Twitter Bootstrap included.

Upvotes: 1

animuson
animuson

Reputation: 54719

You could play around with display: table-cell but it is not compatible with IE less than 8. Here's an example on jsFiddle. It uses a CSS3 selector for the borders in between but you can mess around with that to figure out how you want it to work.

Upvotes: 0

Alex K.
Alex K.

Reputation: 175748

How about giving both a border, but having one with a negative margin equal to the border width so they overlap; 

.column1 {
    float:left;
    width:200px;
    padding:5px;    
    border-right:1px solid #000;
}
.column2 {
    float:left;
    width:200px;
    padding:5px;
    margin-left:-1px;    
    border-left:1px solid #000;    
}​

http://jsfiddle.net/alexk/rxGUS/9/

Upvotes: 3

daGUY
daGUY

Reputation: 28753

There's not really an easy way to do this with pure CSS, but there's a jQuery plugin called EqualHeights that can achieve the effect you want. Basically, you tell it which elements you want to apply it to (.column1, .column2 in your case), and it will dynamically set their heights to the same value (based on whichever one is taller).

Upvotes: 0

will
will

Reputation: 4575

You can do this a few ways. The easiest: Create a background image to replace the css border and apply it to the container which should match the height of the tallest column. This isn't very flexible though.

Secondly, use javascript: Create a variable, maxHeight, set it to 0, then loop through each column returning the height of that column. If it is taller than maxHeight then set maxHeight to that value. Once the loop is over, set all columns to the value of maxHeight.

There are quite a lot of resources for this on Google. Especially jQuery solutions.

Hope that helps :)

Upvotes: 0

Related Questions