Question

I have those DIV’S

<div class='content'>
  <div class='div2'>content 2</div>
  <div class='div2'>content 2</div>
  <div class='div2'>content 2content 2</div>
  <div class='div2'>content 2</div>
  <div class='div1'>content 1</div>
</div>

Main div is fixed size = 980px, inside it i have DIV class’div1′ its floated RIGHT and is fixed size. All i want DIVS with class DIV2 to be:
1. Floated left,
2. Auto width so thay will fill all the remaining size 740px,
3. content inside ‘div2’ align center.

i have this CSS code:

.content { width:980px; overflow: hidden; border: 1px solid #ccc; padding:5px;}
.div1 { overflow: hidden; float:right; width: 140px;}
.div2 { float:left; width: auto; border-right: 1px solid #ccc; text-align:center;}

But i cannot achive
2. Auto width so thay will fill all the remaining size 740px

Answer 1

Easiest way is to do it with a table, and you probably know how.

<div class='content'>
    <table class="divs2">
        <tr>
        <td class='div2'>content 2</td>
        <td class='div2'>content 2</td>
        <td class='div2'>content 2content 2</td>
        <td class='div2'>content 2</td>
        </tr>
    </table>
  <div class='div1'>content 1</div>
</div>

CSS:

.content { width:980px; overflow: hidden; border: 1px solid #ccc; padding:5px;}
.div1 { overflow: hidden; float:right; width: 140px;}
.divs2{ float:left; width:740px;  }
.div2 { border-right: 1px solid #ccc; text-align:center;}

Check this out : http://jsfiddle.net/UCJA3/