How to set two div boxes side by side and one under these two?

Question

i try to set two div boxes side by side and a third div box under these two with the length of both of them.

atm i have this code:

<div id=\"recordCard\"> 
</div>

<div id=\"myAnswer\">
</div>

<div id=\"cardButtons\">
</div>

css code:

#recordCard {
    float: left;
    padding: 10px;
    margin-right: 10px;
    width: 450px;
    min-height: 250px;

    background: #eee;
    border: 4px solid white;
    box-shadow: 0 0 1px rgba(0,0,0, .4);

}

#myAnswer {
    float: right;
    padding: 10px;
    width: 450px;
    min-height: 250px;

    background: #eee;
    border: 4px solid white;
    box-shadow: 0 0 1px rgba(0,0,0, .4);

 }

 #cardButtons {
    display: none;
    float: left;
    background-color: #8cff80;
    border: 1px solid #3dcf2d;
    border-radius: 4px ;

    margin-top: 10px;
    padding: 10px;
    width: 910px;
}

while the third div-box is not displayed, the two div-boxes are perfectly side by side. But by displaying the third box, the second box jumps a bit to the right.

Can anyone help me?

thanks =)

Answer 1

It seems that it may be due to the fact that the two divs that are supposed to be side by side - #myAnswer and #recordCard - do not have widths that equal that of the third div. Currently the two divs in the first row only equal a total of 892px (this includes widths, padding and border dimensions). While the third div totals 930px.

#myAnswer {
    float: right;
    padding: 10px;
    width: 450px;
    min-height: 250px;
    background: #eee;
    border: 4px solid white;
    box-shadow: 0 0 1px rgba(0,0,0, .4);
}

#recordCard {
    width: 458px;
    height: 190px;
}

#cardButtons {
    display: none;
    float: left;
    background-color: #8cff80;
    border: 1px solid #3dcf2d;
    border-radius: 4px ;
    margin-top: 10px;
    padding: 10px;
    width: 910px;
}

Since there is a difference of 38px in total width, you can add that to #myAnswer, or #recordCard. #myAnswer is already at 470px (with padding), so adding the width to #recordCard making it 458px will make the dimensions closer.

Or, narrow the third div as Marc suggests.

Answer 2

The small shift to the right is due to the width of the #cardButtons div.

The div width should be 890px, which with 10px padding will give an overall width of 910px, which is the width of the two preceding elements.