CODEWITHSUNDEEP
htmlcss
thomas
thomas

Reputation: 1453

Aligning the inline block elements from top

How do I make two (or more) floating divs appear like "big buttons" and let them float and be leveled? My problem is that the boxes are "partially leveled"... with one slightly lower than the other. I have tried to use float: left on the adminBox, but then they grow outside the container. Can anyone help me?

I have used this HTML code: (http://jsfiddle.net/jf936/13/)

<div class="container">
<div class="adminBox">
    <h2>Manage users</h2>
    <div class="adminBoxLargeContent" data-bind="text: usersCount"></div>
    <div class="adminBoxSmallContent">Registered users</div>
</div>

<div class="adminBox">
    <h2>Manage templates</h2>
    <div class="adminBoxLargeContent" data-bind="text: templateCount"></div>
</div>

and this style:

.container{
background-color: light-blue;
}
.adminBox{
    height: 200px;
    width: 200px;
    background-color: green;
    color: white;
    border-radius: 7px;
    padding: 7px;
    display: inline-block;
    margin: 5px;
}

.adminBox h2{
    color:white;
    font-size:20px;
    text-align:center;

}

.adminBoxLargeContent{
    font-size: 70px;
    text-align:center;
    padding: 0;
    margin: 0;
    line-height: 1;

}

.adminBox .adminBoxSmallContent{
    float: none;
    text-align:center;

}

Upvotes: 0

Views: 80

Answers (3)

mcmac
mcmac

Reputation: 1052

Maybe this code will be helpful for you: jsfiddle

.container{
    background-color: light-blue;
    overflow:hidden;
}
.adminBox{
    height: 200px;
    width: 200px;
    background-color: green;
    color: white;
    border-radius: 7px;
    padding: 7px;
    display: block;
    margin: 5px;
    float:left;
}
.adminBox h2{
    color:white;
    font-size:20px;
    text-align:center;
}
.adminBoxLargeContent{
    font-size: 70px;
    text-align:center;
    padding: 0;
    margin: 0;
    line-height: 1;
}
.adminBox .adminBoxSmallContent{
    text-align:center;
}

<div class="container">
    <div class="adminBox">
        <h2>Manage users</h2>
        <div class="adminBoxLargeContent" data-bind="text: usersCount"></div>
        <div class="adminBoxSmallContent">Registered users</div>
    </div>

    <div class="adminBox">
        <h2>Manage templates</h2>
        <div class="adminBoxLargeContent" data-bind="text: templateCount"></div>
    </div>
</div>

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

This has nothing to do with float, the issue is that you are using display: inline-block; and hence the element are aligned to the baseline, inorder to fix this, you need to use vertical-align: top;

Demo

.adminBox{
    height: 200px;
    width: 200px;
    background-color: green;
    color: white;
    border-radius: 7px;
    padding: 7px;
    display: inline-block;
    margin: 5px;
    vertical-align: top; /* Add this here */
}

Note: You don't have to use float: none; as nothing is floated here, so you can get rid of those unused properties.

Upvotes: 1

Nitesh
Nitesh

Reputation: 15749

Here you go.

WORKING DEMO

The CSS Code Change:

.adminBox{
    height: 200px;
    width: 200px;
    background-color: green;
    color: white;
    border-radius: 7px;
    padding: 7px;
    display: inline-block;
    margin: 5px;
    float:left;
}

Hope this helps.

Upvotes: 0

Related Questions