Metro Tile Style CSS

Question

Metro Tile Style CSS

1.6k Views Asked by Vincent Dagpin At 28 August 2014 at 09:06

I am trying to create a metro tile style with divs

this is my markup

<div class="tile-tables">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

and this is my CSS

.tile-tables {
    height: 270px;
    width: 100%;
    margin: 0 auto;
    background: Red;
    overflow: auto;
}

.tile-tables > div {
    width: 240px;
    height: 240px;
    background: green;
    display: inline-block;
    float: left;
    margin: 5px;
}

but the problem is the tile will go to new line if it reach the end of the line.

What i want is the blocks will only have 1 line horizontally and the scrollbar is only at horizontal

Click here for preview http://www.cssdesk.com/uUtBM

Any help would be appreciated..

TIA

Original Q&A

There are 2 best solutions below

**Bokdem** · Answer 1 · 2014-08-28T09:15:56.363000

You should wrap all the div's you want to be aligned horizontally in a div which has a total width of all the horizontally div's together.

Then put this div inside the .tile-tables, which has an width:100%; / max-width:700px; with an overflow:auto;

Example CSS code here:

.tile-tables {
    height: 250px;
    width:100%;
    max-width:700px;
    margin: 0 auto;
    background: Red;
    overflow:auto;
}

.tile-tables .extra-div{
    width:2500px;
    height:250px;
}

.tile-tables .extra-div > div {
    position:relative;
    width: 240px;
    height: 240px;
    background: green;
    display: inline-block;
    float: left;
    margin: 5px;
}

jsFiddle

**Benjamin** · Answer 2 · 2014-08-28T09:45:31.493000

Okay, so the main way you'd do this is like the previous answer states. However, if you want to add more divs into the main div, you'll have to constantly change the width of the main div, which isn't a massive problem, but if you want it to be dynamic try this:

HTML

<body onload="setwidth()">
<div class="tile-tables">
  <div id="tilesinside">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
  </div>
  </body>

CSS

.tile-tables{
 height: auto;
 width: 100%;
 margin: 0 auto;
 background: Red;
 overflow-x: scroll;
 overflow-y: hidden;
}

#tilesinside{
  height: 280px;

}

#tilesinside > div {
    width: 270px;
    height: 270px;
    background: green;     
    margin-left: 5px;
    margin-right: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: inline-block;
}

Javascript

<script>
function setwidth(){
var parentdiv = document.getElementById("tilesinside");
var amountofdivs = parentdiv.getElementsByTagName("div").length;
var widthset = amountofdivs * 280;
document.getElementById("tilesinside").style.width = widthset + "px";
}
</script>

If that's okay? I know it's not pure CSS and HTML, but it counts how many divs are inside the "tilesinside" div and then multiplies the variable by the 280, (the width of your tiles plus margins). If you really wanted you, you could put code in to get the width of the tile before it multiplies the variable.

Metro Tile Style CSS

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in METRO-UI-CSS

Trending Questions

Popular # Hahtags

Popular Questions