Question

I am trying to place 7 divs side by side but with a bit of uniqueness.
You can take a look at what I have done so far through the link HERE and view page source.

I want the Center div’s width to fill the space between the Left Middle and Right Middle div irrespective of how far one drags the browser form to the left or right. At the moment the center div has white spaces left and right of it.

Can anyone help me out please?

Answer 1

You can achieve it with <table>. If you are pretending to use div-based structure, then you can simulate divs behaviour by using display:table etc…

here is HTML:

<div style="display:table;width:100%;">
  <div style="display:table-row">

    <div style="display:table-cell;width:100px;background:blue;">Left Fixed</div>
    <div style="display:table-cell;width:auto;background:green;">Left Stretch</div>
    <div style="display:table-cell;width:120px;background:yellow;">Left Middle</div>
    <div style="display:table-cell;width:auto;background:#999;">Center</div>
    <div style="display:table-cell;width:120px;background:yellow;">Right Middle</div>
    <div style="display:table-cell;width:auto;background:green;">Right Stretch</div>
    <div style="display:table-cell;width:100px;background:blue;">Right Fixed</div>

  </div>
</div>

Here is a demo: demo link