CODEWITHSUNDEEP
htmlcsscss-float
user405723
user405723

Reputation: 491

How to force floating DIVs to use maximum horizontal space when wrapping occurs due to resizing

I have two divs horizontally aligned that will wrap (their size gets smaller until the wrapping occurs at some point) when resizing the browser window. The problem is that these two divs won't automatically fill the gap they leave behind

Both have width 48 %, min-width 400px and are floated to left in a div container

Example

DIVCONTAINER

DIV1 ==> There's huge space on the right side because div1 won't auto-stretch after wrapping

DIV2 ==> There's huge space on the right side because div2 won't auto-stretch after wrapping

Is div auto-stretch even possible when wrapping takes place with resizing?

EDIT:

Here's a demonstration of the problem

JSFiddle

<div class="wrapper">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

.div1, .div2 {float: left; width: 50%; min-width: 400px; height: 100px;}
.div1 {background:red;}
.div2 {background:blue;}

enter image description here

Upvotes: 0

Views: 138

Answers (2)

Kundan Sankhe
Kundan Sankhe

Reputation: 224

May be it's because of min-width:400px

If you resize the browser below 800px, that width 48% will not work because of min-width:400px

If you want to wrap both divs into wrapper then wrapper should have 800px or higher than 800px width.

Play with fiddle you will come to know what is happening...increase wrapper width to 800px...

Upvotes: 0

Larry
Larry

Reputation: 1248

Floated divs will not be able to dynamically occupy the remaining width of a container - they are no longer part of the normal layout of the document.

You can achieve what you're looking for by removing your floats, and then using

  • table display properties, or
  • flexbox (if you don't need to worry about <= IE9)

CSS-Tricks' Filling space in the last row will guide you in the correct direction for the flexbox solution.

Upvotes: 1

Related Questions