3

I am making tiles with divs

What I have done:

<html>

<style>

.tile{
    display:inline-block;
    width: 30em;
    height: 30em;
    background-color: #000;
}

</style>

<div class = tile>
</div>

<div class = tile>
</div>

<div class = tile>
</div>

<div class = tile>
</div>

<div class = tile>
</div>

</html>

This causes unused space after the edge of the rightmost tiles (as the boxes jumps to the next line).

What I want to do:

  • The tile size should depend on font size (check)
  • The number of tiles per row should depend on window size (check)
  • The tiles should fill the window perfectly, from edge to edge (to do)

I thought about something like this (pseudocode):

    width: calc(100% / rounded(100% /30em) );

Example: If the window-width divided with desired box-width gives 2,7: Then I want the box-width to be 100%/3.

How can I calculate this with JavaScript and set the width? (I have never used JS before).

tbodt
  • 16,609
  • 6
  • 58
  • 83
user2574264
  • 141
  • 1
  • 4
  • Can you give us a working example of how it's not working? – Zach Latta Jul 11 '13 at 21:07
  • 2
    inline-blocks are sensitive to white space in the source code. Did you try floating the tiles? – bfavaretto Jul 11 '13 at 21:10
  • No. I think it's impossible, apart maybe from if you use flexbox, which I don't understand yet and which isn't well implemented yet. Your size is either relative to the font size (em), either relative to the window size (%). Through JS however you could be able to manage something. For example, if font size is between X and Y, then tiles are X %. Else it's Y %. Or you can make a complicated mathematic formula. – Ariane Jul 11 '13 at 21:15
  • 1
    Weird, you can subtract `em` values in `calc`, but dividing by an `em` value doesn't seem to work... – bfavaretto Jul 11 '13 at 21:31
  • 1
    Actually, that seems to be by the spec... http://dev.w3.org/csswg/css-values/#calc-type-checking You can only divide by numbers (without a unit, that makes them a *length* instead). – bfavaretto Jul 11 '13 at 21:41
  • @everyone I want [this](http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/) effect, without the bloated code. And it should be relative to font size as well. – user2574264 Jul 11 '13 at 23:18
  • @bfavaretto Any way around it? A few lines of JS?? – user2574264 Jul 11 '13 at 23:34
  • @user2574264 The article you linked to is very good, and that code is not bloated at all. That's actually a great CSS solution. – bfavaretto Jul 12 '13 at 03:06
  • Nope. The @media(max-width:) causes the site to look the same on my old desktop and a high-res smartphone. I want the boxes to depend on font size. – user2574264 Jul 12 '13 at 10:35

2 Answers2

1

Temporary solution: I replaced the inline-block with float, and applied some of the solution from this site. However, I changed stuff like @media (max-width: 800px) to @media (max-width: 50em).

This is better but not yet optimal, because I still have to add a lot of @ media for a large range of devices. There is also a potential problem with fitting content(text) to the tiles, but I guess I can somehow use calc() to proportion the font-size inside the tiles to the tiles itself.

Working example (experimental - the point is that the tile size depends on both font-size and screen-width):

<html>

<style>

body {
   margin: 0;
   padding: 0;
   color: red;
}
.tile {
   float: left;
   position: relative;
   width: 20%;
   padding-bottom: 20%;
}
.content {
   position: absolute;
   left: 0.5em;
   right: 0.5em;
   top: 0.5em;
   bottom: 0.5em;
   background-color: #000;
}

@media (max-width: 50em){
  .tile{
     width: 50%;
     padding-bottom: 50%;
  }
}

</style>

<div class=tile>
  <div class = content>
  yay
  </div>
</div>

<div class=tile>
  <div class = content>
  it
  </div>
</div>

<div class=tile>
  <div class = content>
  works!
  </div>
</div>

<div class=tile>
  <div class = content>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

</html>
user2574264
  • 141
  • 1
  • 4
  • I implemented this solution and came to the conclution: The rest of my site is centered with a maximum em width. I want the page with tiles to behave the same way. This limits the use of @media to 3-5 times, which is perfectly acceptable. In other words: Case solved. :) – user2574264 Jul 12 '13 at 21:53
0

You can use text-align: justify on those inline-block elements, as demonstrated here:

http://codepen.io/patrickkunka/pen/GECBF

Here is a blog posts that explains the technique:

http://www.barrelny.com/blog/text-align-justify-and-rwd/

and here a thread that also discusses it:

How to evenly space many inline-block elements?

Community
  • 1
  • 1
ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • Nope. That solution uses @media () to adjust the size of the boxes for different resolutions. Thus the same amount of boxes per row on a 1080p phone, and a 1080p desktop screen. My boxes should depend on font size. – user2574264 Jul 12 '13 at 10:29