html - How can I set a floats width to the left over space? -

i want display 3 divs horizontally aligned each other. create main div (100%) , put 3 divs inside that. in css set 3 childdivs float:left.

now want set first 2 fixed width , set third 1 width left over.

i know table-columns have width:auto; automaticaly fills left on space, don't want use tables. how can floats?

you can put overflow:hidden on third column , automatically take remaining space. see this fiddle.

example:

html:

<div class="container">     <div class="one"></div>     <div class="two"></div>     <div class="three"></div> </div> 

css:

.container {     border: 1px solid black;     width: 300px;     height: 400px; }  .one, .two {     border: 1px solid blue;     float: left;     width: 50px;     height: 400px; }  .three {     border: 1px solid red;     height: 400px;     overflow: hidden; } 

note third column should not floated.