CODEWITHSUNDEEP
htmlwidthcss-float
bruno
bruno

Reputation: 33

div multiple float left stretch

I have someting like this:

<style>
 .putLeft
 {
   float: left;
 }
</style>

<table>
  <tr>
    <td>
      Some dynamic text
    </tr>
  </td>
  <tr>
    <td>
      <div id="div_1" class="putLeft">1<br/>2<br/>3<br/>4</div>
      <div id="div_2" class="putLeft">1<br/>2<br/>3<br/>4</div>
      <div id="div_3" class="putLeft">1<br/>2<br/>3<br/>4</div>
      <div id="div_4" class="putLeft">1<br/>2<br/>3<br/>4</div>
      <div id="div_n" class="putLeft">1<br/>2<br/>3<br/>4</div>
    </td>
  </tr>
</table>

The content of div_1, div_2... div_n are columns with dynamic width.

What I want is something like this:


|some text with dynamic width and can be very long text|
-------------------------------------------------------
|    div1   |      div2    |     div3    |     div4   |
|    1      |        2     |       2     |      4     |
|    1      |        2     |       2     |      4     |



But my result is something like this:

|some text with dynamic with and can be very long text|
-------------------------------------------------------
| div1 | div2 | div3 | div4 |
|  1   |   2  |   2  |   4  |
|  1   |   2  |   2  |   4  |

How can I put the "float: left" columns to stretch to maximum width?

Note: There is no fixed width in the whole example. And I can not make a table to put the div's content.

Edit: Inserted some content on divs. I did put some
to make the example simple. But it will will have other contents.

Upvotes: 3

Views: 480

Answers (2)

DanielB
DanielB

Reputation: 20230

A jQuery example would be:

Html:

<table>
  <tr>
    <td>
      Some dynamic text
    </tr>
  </td>
  <tr>
    <td id="row">
      <div id="div_1" class="putLeft"></div>
      <div id="div_2" class="putLeft"></div>
      <div id="div_3" class="putLeft"></div>
      <div id="div_4" class="putLeft"></div>
      <div id="div_n" class="putLeft"></div>
    </td>
  </tr>
</table>

CSS:

.putLeft
 {
   float: left;
    height: 20px;
    background: #ffcc33;
 }

table { width: 100% }

JS with jQuery

$(function() {
   var count = $('#row div').length;
   $('#row div').each( function(index, item) {
       $(item).css('width', Math.floor(100 / count) + '%');
   });
});

Here is a jsFiddle: http://jsfiddle.net/qdnvq/

This can be made far more accurate by retrieving the width in 'px' from the outer <td> and then calulating pixel widths for the div's and maybe make the last one as large to bypass the missing space from rounding. Also you may use absolute positioning instead of floating.

Upvotes: 1

pixelbobby
pixelbobby

Reputation: 4440

I started a fiddle for you and corrected your mark-up: http://jsfiddle.net/yHrZx/
Can you provide more HTML to it so we can help you with the CSS. Avoid JavaScript Solution for this at all costs...

Upvotes: 0

Related Questions