CODEWITHSUNDEEP
css
Enrique Moreno Tent
Enrique Moreno Tent

Reputation: 25277

CSS Separator on collated columns

I have 2 columns, floated one to each side, and I'd like to use a 1px width line separator, that goes from top to bottom of the longest column.

Id rather stay away of TABLE layouts, and I dont know which one will be the longest column, or how long will it be.

How could I do this with just css?

http://jsfiddle.net/AhfXc/2/

Upvotes: 0

Views: 1169

Answers (3)

Erik Martino
Erik Martino

Reputation: 4235

Something like this

.colright{ 
    float: right;
    border-left: 1px solid gray;
    left: -1px;
    position:relative;
}

http://jsfiddle.net/AhfXc/18/

Upvotes: 1

andrewmu
andrewmu

Reputation: 14534

This is possible with CSS. Here's my version of your example: http://jsfiddle.net/AhfXc/15/

Basically, just make the separator be absolutely positioned within the parent container (make the parent position relative so this works). Then attach the child to the top and bottom with top: 0 and bottom: 0. You could set the separator background to be the colour you want, but I've used a border style since you could easily apply dashed/dotted style if you want to.

This does only works if the columns have a known absolute or relative width because the separator's horizontal position is not directly affected by them, but if this is the case, it's a fairly simple solution.

Upvotes: 0

Moin Zaman
Moin Zaman

Reputation: 25455

You could fake it by putting a parent div around both and giving the parent a background image which would be a 200px wide, 1px high image with the a 1px black/gray dot in the middle.

Upvotes: 0

Related Questions