CODEWITHSUNDEEP
csshtmlwidth
LinogeFly
LinogeFly

Reputation: 41

How to force floated div to fill remaining horizontal space?

Sorry for not really clear title for my problem. I tried to find a proper name to it while I was searching the solution, but I could not find the exact way to describe it.

I have divs with a fixed size that must be floated left and behave like inline blocks. I have a content area on the right side of the page. Here is an example that demonstrates what I mean: http://jsfiddle.net/7sp5M/. If I try to change width of Result area divs would try to fit blocks' area. The problem is that there is a gap between blocks' area and Content area. I need Content area to have minimum width and I want the area to grow horizontally to fill this gap: http://img89.imageshack.us/img89/296/floatingdivs001.png.

For example block's width is 100px; Minimum Content area should be 200px. And I need Content width to vary from 200px to 299px depending on blocks' area width.

Please, advice is it possible to implement such behavior with pure HTML/CSS? I don't have a restriction to avoid tables, so any approach that works would be appropriate.

Update: Thank you all for the comments. Seems like it's not really possible to implement it with pure HTML/CSS. I was not sure about that because I'm not really good in CSS yet. I just implemented such behavior with JavaScript and jQuery and it works the way I need.

Upvotes: 4

Views: 2594

Answers (3)

mahsa.teimourikia
mahsa.teimourikia

Reputation: 1774

You can try this:

<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 for changing 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 consider the borders, you can use outerwidth() insetead. Here you can see it working

Upvotes: 1

Kyle
Kyle

Reputation: 67244

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

You have to give the wrapper #main the CSS display: table; and its children table-cell;. And you must move the div.right markup to after the 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% which is why I used 16%. If you want dynamic width, you can leave the width declaration out and they will automatically resize to whatever's available. This mimics a table's behavior, 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/

Upvotes: 1

kalpaitch
kalpaitch

Reputation: 5271

I would usually then put an inner container inside the block div so that I can then assign padding 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>

Upvotes: 2

Related Questions