Metro Tile Style CSS

Question

Metro Tile Style CSS

1.6k Views Asked by Vincent Dagpin At 04 April 2025 at 22:48

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

**Benjamin** · Answer 1

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.

**Bokdem** · Answer 2

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

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