3 Divs, 2 Fixed Width and 1 Fluid

Question

I have a problem when I float the first div (30px width) to the left, the third div (30px width) to the right and havin the second div takes up the remaining space from the entire width of the window

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 can't make them sit next to each other, the last div is being pushed explicitly due to the liquid second div

thanks

Aiden

Answer 1

you have the wrong hordes

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

non-floating div should be the last.

Answer 2

Apply margin: 0 auto; to .fluid

Answer 3

Put your green divs inside the red. Set the overflow to red as a block. Done.

EXAMPLE

 <div class="fluid">2 <div class="left">3</div> <div class="right">1</div> </div> .right { height:40px; width:40px; float:left; background:green; } .left { height:40px; width:40px; float:right; background:green; } .fluid { overflow:block; height:40px; background:red; border:1px solid yellow; } 

Answer 4

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; }