CODEWITHSUNDEEP
javascripthtmlcss
user2824854
user2824854

Reputation:

How to fill page horizontally with divs without empty space at the end

I am having this simple but frustrating CSS problem. I am trying to fill a page completely with divs/boxes. The problem is, that these boxes have same width all the time, therefore boxes won't fill up evenly. Let me demonstrate this:

Fiddle.

CSS:

.box {
    float: left;
    width: 200px;
    height: 200px;
    margin: 0px 10px 10px 0px;
    background-color: #000000;
}

HTML: 

<div id="boxes">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

This is OK:

enter image description here

But if user has a smaller window size, it will go like:

enter image description here

This would be the best solution, resizing boxes to fit screen horizontally evenly:

enter image description here

What would be the best solution to make them fit whole page when window is resized? Preferably CSS-only (if possible).

Upvotes: 1

Views: 590

Answers (3)

Michael Mikowski
Michael Mikowski

Reputation: 1279

Here is a working example.

IMO, the solution depends om your needs. If are able to scale the images, then the 33% rule offered by others here is probably acceptable. However, you may wish to limit how far the size can be go (min-width). Also, this is going to totally bork your aspect ratios, which you might find unacceptable.

One alternate solution would be to have a 'viewport' div on on-top of a larger div that allows some bleed-over to minimize the 'gosh, it's only one pixel only over' effect (where you get a huge, gaping blank column. This solution allows the cards to bleed out of the viewport a bit before forcing a new column. And it is CSS-only. This is the provided example. Test it out by changing the outer container width and height ('my-outer'):

/* CSS */
.my-outer {
  position : relative;
  box-sizing : border-box;
  width  : 350px;
  height : 450px;
  border   : 1px solid red;
  overflow-x : hidden;
  overflow-y : auto;
}
.my-inner {
  position : relative;
  box-sizing : border-box;
  border : 1px solid green;
  width : 120%;
}
.my-card { 
  box-sizing   : border-box;
  float : left;
  margin : 10px;
  width  : 100px;
  height : 100px;
  font-size : 50px;
  line-height : 100px;
  text-align  : center;
  font-weight : 800;
  background  : #aaf;
  color       : #fff;
  border-radius : 2x;
  box-shadow: 0 0 16px -2px #888;
}

<!-- HTML -->
<div class="my-outer">
  <div class="my-inner">
   <div class="my-card">1</div>
   <div class="my-card">2</div>
   <div class="my-card">3</div>
   <div class="my-card">4</div>
   <div class="my-card">5</div>
   <div class="my-card">6</div>
   <div class="my-card">7</div>
   <div class="my-card">8</div>
   <div class="my-card">9</div>
   <div class="my-card">10</div>
   <div class="my-card">11</div>
   <div class="my-card">12</div>
   <div class="my-card">13</div>
   <div class="my-card">14</div>
   <div stlye="clear : both;"></div>
 </div>

Another alternate solution, which would probably provide the best user experience, would be to resize the container in steps. This would require some JavaScript, but can be fairly easy to quite difficult to implement depending about the environment. And yes, I have done this sort of thing before ;)

Upvotes: 1

DrCord
DrCord

Reputation: 3955

something like html:

<div class="box></div>
<div class="box></div>
<div class="box></div>
<div class="box></div>
<div class="box></div>
<div class="box></div>

css:

.box{
    height: 100px;
    width: 33%;
}

Upvotes: 0

egl
egl

Reputation: 167

Try giving the container div boxes a width of the max amount of boxes + the margin for each box. In your example that would be 200 * 3 + 30. This is given that you only want three boxes per row.

Upvotes: 0

Related Questions