3 Div, 2 a larghezza fissa e 1 fluido

Question

Ho un problema, dove sto fluttuando il primo div (larghezza 30px) a sinistra, il terzo div (larghezza 30px) a destra e havin il secondo div riprende il rimanente spazio dalla intera finestra larghezza

Esempio:

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

Problema:

smusso ottengo loro di sedersi accanto all'altro, l'ultimo div viene spinto sotto, ovviamente, a causa della seconda div fluido

Grazie

Aiden

Answer 1

hai gli ordini sbagliati

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

la non il div flottante dovrebbe essere l'ultimo.

Answer 2

Applicare margin: 0 auto; al .fluid

Answer 3

Metti i tuoi div "verdi" all'interno del "rosso". Impostare l'overflow su "rosso" come blocco. Fatto.

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

Ecco un altro modo incredibilmente facile da fare questo usando 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; 
}