DIVs borders (less possibilities than TABLE borders?!)

A little question

I have 2 DIVs, side by side (float) :

AAAAAAAAAAA BBBBBBBBBBB
AAAAAAAAAAA BBBBBBBBBBB
AAAAAAAAAAA
AAAAAAAAAAA

I want that a 1pix solid border between the 2 DIVs, and I want this border to have the height of the longest DIV (in my previous example, height of A, and in this other example, heigh开发者_Go百科t of B)

AAAAAAAAAAA BBBBBBBBBBB
AAAAAAAAAAA BBBBBBBBBBB
            BBBBBBBBBBB
            BBBBBBBBBBB

I know how to do this with a simple <table> but I don't know how to do it with DIVs

I tried to put a border-right for A, AND a border-left for B, but then I have a 2px border...

Thank you for your help!

I'm not sure this is the best solution, but...

<div id="foo">
AAAAAAAAAAA
AAAAAAAAAAA
AAAAAAAAAAA
AAAAAAAAAAA
</div>
<div id="bar">
BBBBBBBBBBB
BBBBBBBBBBB
</div>

#foo, #bar {
    float: left;
    padding: 5px;
}
#foo {
    border-right: 1px solid #000;
}
#bar {
    border-left: 1px solid #000;
    margin-left: -1px;
}

You can make a border-right for A, AND a border-left for B as You did and add a margin:-1px; for B

The "usual" way is to use a background image on the element surrounding the two DIVs as a border.

If you don't need to support IE6, then you also could display the two DIVs as table cells (display: table-cell) instead of floating and apply the border just as it it were a table.

Jevgeni Bogatyrjov answered before me :)

Add

margin-left: -1px;

to div B

If you want to do it without images:

Wrap A and B into another div C. Set CSS position:relative for C Then create a third div D inside C. Set the following CSS properties:

position:absolute;
top:0;
right:[width-of-B + padding]

If you have partially transparent borders or more than 2 divs that need to be aligned like this and can't use the margin: -1px; solution, than you should use display: box; on your divs, thus making all of them the height of the highest one. This way you only need a border on on side of each but the first or last div