How to make div tiles and text within them align properly?

Question

(Note: when running example, use Full Page feature to see all discrepancies)

I have some divs formatted as tiles. My goal is to have:

• tiles lined up with each other
• all text to be within the tiles, centered
• white description text that's at the bottom to be at the bottom, and to not overflow outside the border
• bonus: white description text to have padding around it (so that it does not reach too closely to the border of the tiles).

Problems:

Currently, I am not sure how to line the tiles up or what is causing them to be misaligned.

For "bonus" when I use padding, only left side is padded, but right side usually goes outside of the border. I can't figure out why.

How can I align the tiles and text properly?

 .tile { border-style: solid; padding: 14px; border-width: 3px; color: black; display: inline-block; height: 130px; list-style-type: none; margin: 10px 40px 10px 20px; position: relative; text-align: center; width: 270px; border-radius: 25px; box-shadow: 10px 10px 5px #888888; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCF11B), color-stop(1, #3874FF)); background-image: linear-gradient(-28deg, #CCF11B 0%, #3874FF 100%); } .tile_description { color: white; font-size: 1.3em; font-style: italics; position: absolute; text-align: center; } 

 <fieldset> <legend> <b>Tiles</b> </legend> <div class="tile"> <h1>Assembly</h1> <p class="tile_description">Manage Product Assembly and Maintenance</p> </div> <div class="tile"> <h1>Design</h1> <p class="tile_description">Manage Product Designs</p> </div> <div class="tile"> <h1>Document Generator</h1> <p class="tile_description">Generate documents from recorded data</p> </div> </fieldset> 

Answer 1

A few things should be corrected:

• You shouldn't use <h1> tags multiple times in that example.

• Use vertical-align: top to make the blocks stay nicely in the row

• Position absolute isn't good to use there.

Update demo - http://jsfiddle.net/xm7qpkku/ (very little changes)

HTML

<fieldset>
    <legend>
        <b>Tiles</b>
    </legend>
    <div class="tile">
        <h2>Assembly</h2>
        <p class="tile_description">Manage Product Assembly and Maintenance</p>
    </div>
    <div class="tile">
        <h2>Design</h2>
        <p class="tile_description">Manage Product Designs</p>
    </div>
    <div class="tile">
        <h2>Document Generator</h2>
        <p class="tile_description">Generate documents from recorded data</p>
    </div>
</fieldset>

CSS

.tile {
    border-style: solid;
    padding: 14px;
    border-width: 3px;
    color: black;
    display: inline-block;
    height: 130px;
    list-style-type: none;
    margin: 10px 40px 10px 20px;
    position: relative;
    text-align: center;
    width: 270px;
    border-radius: 25px;
    box-shadow: 10px 10px 5px #888888;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCF11B), color-stop(1, #3874FF));
    background-image: linear-gradient(-28deg, #CCF11B 0%, #3874FF 100%);
    vertical-align: top;
    text-align: center;
}

.tile_description {
    color: white;
    font-size: 1.3em;
    font-style: italic;
}

You can add the some paddings to the <p> tag if you need.

Answer 2

Your .tile_description is absolutely positioned therefore its width is the width of its contents, not the with of its parent. Remove the positioning and the description text should be centered.
To fit the description in the tiles you'll have to give it more space, in my example I remove the top margin of the h1
The tiles div already has padding so the descriptions doesn't really need any.

 .tile { overflow: hidden; border-style: solid; padding: 14px; border-width: 3px; color: black; display: inline-block; height: 130px; list-style-type: none; margin: 10px 40px 10px 20px; position: relative; text-align: center; width: 270px; border-radius: 25px; box-shadow: 10px 10px 5px #888888; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCF11B), color-stop(1, #3874FF)); background-image: linear-gradient(-28deg, #CCF11B 0%, #3874FF 100%); } .tile h1{ margin-top:0; } .tile_description { color: white; font-size: 1.3em; font-style: italic; text-align: center; } 

 <fieldset> <legend> <b>Tiles</b> </legend> <div class="tile"> <h1>Assembly</h1> <p class="tile_description">Manage Product Assembly and Maintenance</p> </div> <div class="tile"> <h1>Design</h1> <p class="tile_description">Manage Product Designs</p> </div> <div class="tile"> <h1>Document Generator</h1> <p class="tile_description">Generate documents from recorded data</p> </div> </fieldset> 

Answer 3

Okay, first things first. I would suggest you look into resetting your css before you start. Some of the spacing issues you have are due to the default margins, padding, etc of the browser, and you'd have a lot more control over everything if you zero it all out first. You'll end up having to explicitly set a lot of values for your tags, but in the long run it'll save you a lot of headaches. Just include the code here, whether you include it in your css file or put it in a separate file and link to it: http://meyerweb.com/eric/tools/css/reset/

As for the positioning of the tiles, you don't need to use vertical-align or position on anything. Put float:left; on your tiles. This will cause them to "float" next to each other and line up quite nicely, provided there is enough room for them to do so on the screen (otherwise they'll start dropping down to new rows).

Here's a bin showing what I was talking about. I included the reset css rules, set a few simple tag rules, and then styled your tiles at the bottom. You may need to resize the output panel to get all three on the same line. Hope this helps! http://jsbin.com/nufeyu/1/edit?css,output

Answer 4

 .tile { width: 300px; height: 160px; border: 3px solid black; border-radius: 25px; padding: 14px; color: black; display: inline-block; margin: 10px 40px 10px 20px; position: relative; text-align: center; box-shadow: 10px 10px 5px #888888; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCF11B), color-stop(1, #3874FF)); background-image: linear-gradient(-28deg, #CCF11B 0%, #3874FF 100%); vertical-align: top; box-sizing: border-box; } .tile_description { width: 100%; color: white; font-size: 1.3em; font-style: italic; margin: 0; position: absolute; left: 0; bottom: 0; padding: 14px; text-align: center; box-sizing: border-box; } 

 <fieldset> <legend> <b>Tiles</b> </legend> <div class="tile"> <h1>Assembly</h1> <p class="tile_description">Manage Product Assembly and Maintenance</p> </div> <div class="tile"> <h1>Design</h1> <p class="tile_description">Manage Product Designs</p> </div> <div class="tile"> <h1>Document Generator</h1> <p class="tile_description">Generate documents from recorded data</p> </div> </fieldset>