3 Divs, 2 Fixed width and 1 Fluid

Question

I have a problem, where i am floating the first div(30px width) to the left, the third div(30px width) to the right and havin the second div take up the remaining space from the entire window width

Example:

http://jsfiddle.net/AScBN/188/

.right
{
   height:40px;
   width:40px;
   float:left;
   background:green;
}

.left
{
   height:40px;
   width:40px;
   float:right;
   background:green;
}

.fluid
{
   margin-right: 50px;
   height:40px;
   background:red;
}

div
{
   border:1px solid yellow;
}

Problem:

I cant get them to sit beside each other, the last div gets pushed under obviously because of the fluid second div

Thanks

Aiden

Answer 1

you got the orders wrong

<div class="right">1</div>
<div class="left">3</div>
<div class="fluid">3</div>

the non-floating div should be the last one.

Answer 2

Here's another incredibly easy way to do this using Flex - updated jsFiddle

HTML

<div class="wrapper">
    <div class="fixed">1. Fixed Right</div>
    <div class="fluid">2. Fluid</div>
    <div class="fixed">3. Fixed Left</div>
</div>

CSS

.wrapper {
    height:40px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.wrapper div {
    margin: auto;
    border:1px solid yellow;
    height: 40px;
    text-align: center;
}
.fixed {
    width:40px;
    background:green;
}
.fluid {
    flex: 1;
    background:red;
}