How to make a floating div fill the remaining horizontal space?

Question

Sorry for the not-so-clear name for my problem. I tried to find a suitable name for him while I was looking for a solution, but I could not find the exact way to describe it.

I have fixed-sized divs that should be placed on the left and behave like inline blocks. I have a content area on the right side of the page. Here is an example demonstrating what I mean: http://jsfiddle.net/7sp5M/ . If I try to change the width of the result area, divs will try to fit the area of ​​the blocks. The problem is that there is a gap between the block area and the content area. I need the content area to have a minimum width, and I want the area to expand horizontally to fill this gap: http://img89.imageshack.us/img89/296/floatingdivs001.png .

For example, the block width is 100 pixels; The minimum content area should be 200 pixels. And I need the width of the content to vary from 200 pixels to 299 pixels depending on the width of the block area.

Please advice, is it possible to implement this behavior using pure HTML / CSS? I have no restrictions to avoid tables, so any approach that works will be appropriate.

Refresh . Thanks everyone for the comments. It seems like this is actually not possible to implement using pure HTML / CSS. I was not sure about this because I am not very good at CSS yet. I just implemented this behavior with JavaScript and jQuery and it works the way I need.

Answer 1

I would usually put an inner container inside a div block so that I can then assign fill without affecting the width:

.block { width: 20%; } .block > .inner { padding-left: 10px; } .block:fist-child > .inner { padding: 0; } <div class="block"> <div class="inner"> block </div> </div> 

Answer 2

You can do this with display: table; and table-cell;

You must provide the #main CSS shell display: table; and its children are table-cell; . And you have to move the markup div.right after div.left

  <div class="left"> <div class="block">Block1</div> <div class="block">Block2</div> <div class="block">Block3</div> <div class="block">Block4</div> <div class="block">Block5</div> <div class="block">Block6</div> </div> <div class="right">Content</div> 

You can adjust the width of the blocks to whatever you want, 100%/6=16% , so I used 16%. If you need dynamic width, you can leave a width declaration and they will automatically change to all available. This mimics the behavior of a table, but is still semantic markup.

 #main { width: 100%; display: table; } .right { display: table-cell; width: 200px; height: 300px; background: #888; } .left { overflow: hidden; height: 300px; background: #ccc; display: table-cell; } .block { width: 16%; height: 50px; float: left; border: 1px solid blue; display: table-cell; }​ 

http://jsfiddle.net/Kyle_Sevenoaks/7sp5M/31/

Answer 3

You can try the following:

 <div id="main" class=""> <div class="right">Content</div> <div class="left"> <div class="clearfix"></div> <div class="block">Block1</div> <div class="block">Block2</div> <div class="block">Block3</div> <div class="block">Block4</div> <div class="block">Block5</div> <div class="block">Block6</div> </div> </div> 

In CSS:

 .right { float: right; min-width: 200px; height: 300px; background: #888; } .left { overflow: hidden; height: 300px; background: #ccc; width:300px; float: left; } .block { width: 100px; height: 50px; float: left; border: 1px solid blue; } .clearfix{ clear:both; } 

And to change the width of the div I used jQuery

 $(document).ready(function(){ var left_width = $(".left").width(); var block_width = $(".block").width()+2; var count = Math.floor(left_width/block_width); var calc_left_width = count * block_width; var calc_right_width = $("#main").width() - calc_left_width; $(".left").width(calc_left_width); $(".right").width(calc_right_width); }); 

I added 2 to the width of the block to view the borders, you can use the outer width () of the insetead. Here you can see how it works.