What is the best way to ensure a floated div fills up the rest of the available horizontal

Question

What is the best way to ensure a floated div fills up the rest of the available horizontal

Apologies for the unclear title of my issue. I struggled to find the right words to describe it while searching for a solution.

I have fixed-size divs that need to be floated left and behave like inline blocks. On the right side of the page, there is a content area. Check out this example to see what I mean: http://jsfiddle.net/7sp5M/. Changing the width of the Result area causes the divs to adjust accordingly, but there's a gap between the blocks and the Content area. I want the Content area to have a minimum width and expand horizontally to fill this gap: .

For instance, let's say a block's width is 100px; the minimum width of the content area should be 200px. Ideally, I'd like the Content width to range from 200px to 299px based on the width of the blocks.

Is it feasible to achieve this using only HTML and CSS? I'm open to table solutions if necessary.

Update: Thank you all for your feedback. It appears that achieving this behavior solely with HTML/CSS may not be possible. As I'm still learning CSS, I ended up implementing the desired functionality using JavaScript and jQuery, which met my requirements perfectly.

css html width

Answer 1

Answer №1

To maintain the width of the block div while adding padding, I typically create an inner container within it:

.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

To maintain the width of the block div while adding padding, I typically create an inner container within it:

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

Answer 3

Answer №2

To achieve this layout, utilize the CSS properties display: table; and table-cell;

The parent container #main should be styled with display: table;, while its children should have table-cell;. Additionally, ensure that the div.right element is positioned after the div.left in the HTML markup.

<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>

The block widths can be customized as needed, such as using percentages like 16%. Omitting a specific width declaration allows for dynamic resizing based on available space, simulating a table's behavior while maintaining 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 4

To achieve this layout, utilize the CSS properties display: table; and table-cell;

The parent container #main should be styled with display: table;, while its children should have table-cell;. Additionally, ensure that the div.right element is positioned after the div.left in the HTML markup.

<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>

The block widths can be customized as needed, such as using percentages like 16%. Omitting a specific width declaration allows for dynamic resizing based on available space, simulating a table's behavior while maintaining 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 5

Answer №3

Give this a shot:

<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;
}

To change the width of the div, I utilized 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 account for the borders, alternatively, you can utilize outerwidth(). Here is an example of it in action

Answer 6

Give this a shot:

<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;
}

To change the width of the div, I utilized 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 account for the borders, alternatively, you can utilize outerwidth(). Here is an example of it in action

What is the best way to ensure a floated div fills up the rest of the available horizontal

Answer №1

Answer №2

Answer №3

Similar questions

The value within the style.setProperty function does not get applied

Uploading images using Ajax with HTML and PHP

How can I use Bootstrap to center footer text and display two images on the right side?

Unresponsive JavaScript on specific element IDs

Exploring Laravel 4's CSS Routing

How can I add 0-5 images to a column without causing any distortion in the row?

Exploring the 3D Carousel Effect with jQuery

Modify the contents of a textbox by editing the text as you type

Is it necessary to contain every element within a row and column in the Foundation or Bootstrap grid system?

A step-by-step guide on capturing video for an HTML element

Bootstrap tab toggling with checkbox

Transferring data from multiple form datepickers to identical destinations

To determine whether a variable is an integer in PHP

I'm encountering an issue where my information doesn't seem to be getting through to the Django

Issue with Bootstrap Grid functionality

Issues with AngularJS radio button functionality

IE11 has issues with properly scaling SVG within flexbox

A unique feature where a bar emerges from the bottom of the screen, smoothly glides upwards, and then securely fastens to

Issue with !important keyword taking precedence not resolved

Convert the 'value' attribute in HTML into a clickable link