Border-collapse effect for adjacent floated divs?

HTML & CSS
1

I have two sibling div elements. I would like there to be a 2 pixel border between the elements. So I’ve applied a 2 px left border to the 2nd div.

However, when the 1st element is taller than the 2nd, the border effectively stops at the height of the 2nd div.

I’ve tried placing border-right and negative margins on the 1st element so that the borders overlap, but it does not seem to work.

How can I accomplish this without using a background image on the parent container?

2

I don’t know of any simple or straightforward way to do this other than with JavaScript (or bg image, of course). But Paul O’B has some methods for equal height columns that might be of use:

Untitled Document

2 Equalising Columns

Personally, though, I’d use the image.

3

@ralph - thanks very much for the links.

I was thinking that I might be able to use one of the table layout properties to make it work.

I can’t use a background image because I’m giving the user the ability to change the width of the columns on the fly, so I would not know where to position the background image when the left column width changes from the width measured for the divider line.

4

Yes, that should work too, as long as IE7 and below can safely be ignored. The border is probably not essential anyhow, so personally I wouldn’t worry about those browsers.

5

Hi,

I’m not sure if this is what you meant but I use this trick all the time for a dividing border between two floats.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrap {
    width:602px;
    border:1px solid #000;
    overflow:hidden;
    margin:0 auto 10px;
}
.box1 {
    float:left;
    border-right:1px solid #000;
    width:300px;
}
.box2 {
    float:left;
    border-left:1px solid #000;
    width:300px;
    margin-left:-1px;
}
p {
    margin:0 0 1em;
    padding:0 10px;
}
</style>
</head>
<body>
<div class="wrap">
    <div class="box1">
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
    </div>
    <div class="box2">
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
    </div>
</div>
<div class="wrap">
    <div class="box1">
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
    </div>
    <div class="box2">
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
    </div>
</div>
</body>
</html>
6

Ha ha, now that’s just plain cheeky! Nice solution, though.

7