Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Bringing the p and div in the same line

Bringing the p and div in the same line

Problem

I have type of card created. It has 3 rows with a p and a div. I want both of them to come in the same line. How can I do this?

HTML:

Skills

Commitment

Reputation

CSS:

.user_card {
    background-color: #eee;
    width: 30%;
    padding: 10px;
}
.user_card div p {
    display: inline;
}
.user_card div.skills {
    margin-left: -1px;
}
.user_card div div.progress_wrap {
    background-color: white;
    width: 100%;
    border: 1px solid #bbb;
}
.user_card div div.progress {
    height: 30px;
    background-color: #ddd;
}

Fiddle.

Please post fiddle as well with your answers!

Problem courtesy of: Mohammad Areeb Siddiqui

Solution

Using display table, table-row, table-cell.

http://jsfiddle.net/vnama/

.user_card {
    background-color: #eee;
    width: 30%;
    padding: 10px;
    display:table;
}

.user_card p {
    display: table-cell;
    vertical-align:top;
    line-height:30px;
    padding:2px 10px 2px 2px;
}
.user_card div {
    display:table-row;
    padding:2px;
}
.user_card div div {
    display:table-cell;
}
.user_card div div.progress_wrap {
    background-color: white;
    width: 100%;
    border: 1px solid #bbb;
}
.user_card div div.progress {
    height: 30px;
    background-color: #ddd;
}
Solution courtesy of: Andrew Clody

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Bringing the p and div in the same line

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×