1

I'm working on a webpage and I want it to look like those magnets (or tiles, whatever you like to call them) in the start menu of Windows 8. After some work, I got the following:

html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link href='http://fonts.googleapis.com/css?family=Bad+Script|Architects+Daughter|Comfortaa|Handlee' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id="banner-div">
    </div>
    <div class="row">
        <div class="magnets">
            Some text
        </div>
        <div class="magnets">
        </div>
        <div class="magnets">
        </div>
    </div>
    <div class="row">
        <div class="magnets">
        </div>
        <div class="magnets">
        </div>
        <div class="magnets">
        </div>
    </div>
</body>
</html>

styles.css

html, body {
    background:#f8e4e4;
    font-family:'Bad Script';
    font-size:medium;
    text-align:center;
    width:100%;
}

.magnets {
    border:5px solid black;
    height:300px;
    width:300px;
    text-align:center;
    margin-right:2%;
    margin-top:2%;
    display:inline-block;
}

.row {
    width:100%;
    margin-top:1%;
}

But when I open it with IE, something weird happens. The first magnet (The one with Some text) does not align with the other magnets. When I delete the text and run it again it's back to normal again. It seems like that it is the text that pulls the magnet downwards. I think this is very abnormal and clearly this should not happen.

I also tried this with Google Chrome but the result is the same as that of IE.

Tintumon M
  • 1,156
  • 2
  • 14
  • 36
Sweeper
  • 213,210
  • 22
  • 193
  • 313
  • it's just happens due to display:inline-block coz inline-block default having the their own margins that changes the width of your calculations as i think so – Himesh Aadeshara Aug 07 '15 at 06:50
  • It's better to use isotope masonry grid system (http://isotope.metafizzy.co/layout-modes/masonry.html) because you want grid like window 8. It's good to use it. – Ganesh Yadav Aug 14 '15 at 11:05

2 Answers2

1

Add overflow:hidden; in .magnetsDemo

.magnets {
    border:5px solid black;
    height:300px;
    width:300px;
    text-align:center;
    margin-right:2%;
    margin-top:2%;
    display:inline-block;
    overflow:hidden;

}

I tested the output in Chrome, Mozilla and IE, It worked fine. If you remove width:100%; from html, body , Its giving similar output

G.L.P
  • 7,119
  • 5
  • 25
  • 41
1

Or you could set vertical-align: bottom; on the .magnet class.

EDIT:

The reason for this is that, because the .magnet classed blocks are redefined as being inline-blocks, the blocks are treated as though they were text, so they all have their bottoms line up on a base line by default.

Whenever one of these blocks contains text, the default "anchor" to the base line shifts from the bottom of the block itself to the text inside the block, and the block itself just becomes a kind of border around the text without meaningful anchor points. To force the block to realign with its siblings, you need to override this default behaviour by explicitly defining vertical-align: bottom; on the block so that it will align to the bottom of the base line, just like text will align itself to the bottom of the base line by default, since text is also displayed inline.

Some more reading on this:

/EDIT

Link to the result: http://jsfiddle.net/e1og1m8v/, or a local runnable snippet to elaborate:

html, body {
    background:#f8e4e4;
    font-family:'Bad Script';
    font-size:medium;
    text-align:center;

    width:100%;
}

.magnets {
    border:5px solid black;
    height:100px;
    width:100px;
    text-align:center;
    margin-right:2%;
    margin-top:2%;
    display:inline-block;
    vertical-align: bottom;
}

.row {
    width:100%;
    margin-top:1%;
}
<body>
    <div id="banner-div">

    </div>
    <div class="row">

        <div class="magnets">
            Some text
        </div>

        <div class="magnets">

        </div>

        <div class="magnets">

        </div>
    </div>

    <div class="row">

        <div class="magnets">

        </div>

        <div class="magnets">

        </div>

        <div class="magnets">

        </div>
    </div>
</body>
klaar
  • 601
  • 6
  • 17