Div positioning on same line

Question

I have a problem with some divs. In short here is what I need: 2 divs with a certain width (same width) - one with float left and one with right, and a third div that takes all the remaining space. The divs are using display : inline-block to have them on same line.

I have tried this :

    <div class="wrapper">
        <div class="control leftControl"></div>
        <div class="display"></div>         
        <div class="control rightControl"></div>
    </div>

And here is my css:

.wrapper {
    width: 100%;
    height: 100%;
    min-width: 960px;
    background-color: #E8E8E8;
}

.control {
    width: 10%;
    height: 100%;
    display: inline-block;
    background-color: #ADADAD;
}

.leftControl {
    float: left;
}

.rightControl {
    float: right;
}

.display {
    width: 80%;
    height: 100%;
    display: inline-block;
}

The problem is that using % on some resolution causes the last div (controlRight) to be moved on a new line.I can understand why and found that if i use 79% on display the divs display almost correctly (1% left unsued.) It is clear to me that this is not a correct solution. Any help is appreciated.

Answer 1

You can put all your elements float:left and your 100% will always fit: fiddle

HTML

<div class="control"></div>
<div class="display"></div>         
<div class="control"></div>

CSS

.control {
    width: 10%;
    height: 200px;
    background-color: green;
    float:left;
}

.display {
    width: 80%;
    height: 200px;
    background-color:blue;
    float:left; 
}​

Putting everything on float left will simply push divs one by one on the right.