html - 2 floating div's side by side, with no width

Question

html

<div id="container">
    <div id="one">One</div>
    <div id="two">Two</div>
</div>

css

#container {
    width: 500px;
    height: 500px;
    background-color: red;
}

#one {
    width: 340px;
    height: 100px;
    margin: 20px;
    background-color: green;
    float: left;
}

#two {
    width: 100px;
    height: 100px;
    margin: 20px 20px 20px 0px;
    background-color: blue;
    float: right;
}

This is what i want to do: http://jsfiddle.net/p4ZAd/

I want to make a margin of 20px between the two divs and this is how far Iv'e gotten, but is it possible to do it any other way?

What i would idealy like is to remove the width on the "#one" completely and just have it be maximum size with a margin towards the "#two".

Answer 1

LIke this

working fiddle

css

*{
    margin:0;
    padding:0;
}
#container {
    width: 500px;
    height: 500px;
    background-color: red;
    display:table;
}

#one {

    background-color: green;

    display:table-cell;
}

#two {

    background-color: blue;
   display:table-cell;
}

Answer 2

タイプを使用tableおよびtable-cell表示して、 の動作を模倣できますtable。次にborder-spacing、セル間のマージンを達成するために使用します。

HTML:

<div id="container">
    <div id="one">One</div>

    <div id="two">Two</div>
</div>

CSS:

#container {
    display: table;
    width: 500px;
    height: 400px;
    background-color: red;
    border-spacing: 20px;
}

#one {
    display: table-cell;
    background-color: green;
}

#two {
    display: table-cell;
    width: 100px;
    background-color: blue;
}

JSFiddle ここ

対応ブラウザ一覧はこちらdisplay: table;