Markup and CSS to present Table Data

Question

I have the following "Table" :

Where i want the blue blocks to have specific width and the yellow blocks to expand to fill the rest of the space, based on the container width.

My current approach is to have every block of every row float left and i give them specific width, but this approach is not scalable and not responsive.

Can you please suggest me a better approach for what i want to achieve?

I have also made a fiddler so you can play with the markup and see what i did.

http://jsfiddle.net/RickyStam/bG4dA/

Below is my HTML

<div class="iframe-container">
            <div class="content">
                <div class="betcontainer">
                    <p class="bettitle">Match Outcome</p>
                    <div class="betheaderwrap"><span class="betheader">Away</span><span class="betheader">Draw</span><span class="betheader">Home</span></div>
                    <div class="clear"></div>
                    <div><span class="bettext-big">TEAM A v TEAM B</span><span class="bet">3.30</span><span class="bet">3.30</span><span class="bet">2.15</span></div>
                    <div class="clear"></div>
                </div>
                <div class="seperatebets"></div>
                <div class="betcontainer">
                    <p class="bettitle">Goal</p>
                    <div><span class="bettext-medium">Over 2.5</span><span class="bet">2.05</span><span class="bettext-medium">Over 2.5</span><span class="bet">1.70</span></div>
                    <div class="clear"></div>
                </div>
                <div class="betcontainer">
                    <p class="bettitle">1st Half</p>
                    <div class="betheaderwrap"><span class="betheader">Away</span><span class="betheader">Draw</span><span class="betheader">Home</span></div>
                    <div class="clear"></div>
                    <div><span class="bettext-big">TEAM A v TEAM B</span><span class="bet">3.80</span><span class="bet">2.00</span><span class="bet">2.80</span></div>
                    <div class="clear"></div>
                </div>
                <div class="betcontainer">
                    <p class="bettitle">Half with most goals</p>
                    <div><span class="bettext-xlarge">1st Half</span><span class="bet">3.20</span></div>
                    <div class="clear"></div>
                    <div><span class="bettext-xlarge">2nd Half</span><span class="bet">1.95</span></div>
                    <div class="clear"></div>
                    <div><span class="bettext-xlarge">Draw</span><span class="bet">3.30</span></div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>

Here is my CSS:

.clear {
    clear: both;
}

body {
    font-family: Arial;
}
.iframe-container {
    width: 610px;
    height: 370px;
    background: #f3f3f3;
    position:relative;
    overflow:hidden;
}

.content {
    margin-top: 40px;
    height:300px;
    overflow-y:auto;
    padding:0px 20px;
}

.bet {
    width:66px;
    display:block;
    line-height:27px;
    text-align:center;
    background:blue;
    float:left;
    border-top:1px solid #cad6e4;
    border-bottom:1px solid #cad6e4;
    border-right:1px solid #cad6e4;
    cursor:pointer;
    font-weight:bold;
    color:white;
}
.bet:hover{
    background:grey;
    color:white;
}

.betcontainer {
    width:556px;
    font-size:12px;
    font-family:Arial;
}
.bettitle {
    width:551px;
    line-height:27px;
    padding-left:3px;
    background: red;
    color:white;
    font-weight:bold;
    border:1px solid #cad6e4;
}

.bettext-big{
    float:left;
    line-height:27px;
    width:347px;
    background:yellow;
    padding-left:6px;
    border:1px solid #cad6e4;
}
.bettext-medium{
    float:left;
    line-height:27px;
    width:203px;
    background:yellow;
    padding-left:6px;
    border:1px solid #cad6e4;

}
.bettext-xlarge{
    float:left;
    line-height:27px;
    width:481px;
    background:yellow;
    padding-left:6px;
    border:1px solid #cad6e4;
}

.betheaderwrap {
    width:100%;
    height:15px;
    background:#ddd;
}
.betheader {
    width:66px;
    line-height:15px;
    color:#666;
    float:right;
    text-align:center;
    font-weight:bold;
}

.seperatebets {
    width:100%;
    height:10px;
    background:white;
}

Answer 1

You can use floats. If you need your layout to be responsive, give % width instead of px.

You will need to calculate so that the sum of width of every block on each row doesn't exeed 100%.

Then use box-sizing:border-box; css property so that the width set on each block also contains the border (see here for an overview of that property).

Here is an example FIDDLE