CODEWITHSUNDEEP
htmlcsstext
Sweeper
Sweeper

Reputation: 270860

Text in a div seems to pull the div downwards

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.

Upvotes: 1

Views: 83

Answers (2)

klaar
klaar

Reputation: 621

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>

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

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

Upvotes: 1

Related Questions