CODEWITHSUNDEEP
htmlcss
maya
maya

Reputation: 49

Unexpected behaviour of width property

I have three divs in one row, theirs display property is set to table-cell. They are all wrapped by parent div. I need the inner divs to have equal width, so I set it to 33%. But the behaviour of width is strange. If 33% is set, the divs aren't stretched to maximum.But if I set 1%, the all three elements are equal width and stretched to maximum. Why is this such? Have I something wrong in my css?

Here is my code:

<div class="parent">
    <div class="child">Ut molestie consequat viverra.</div>
    <div class="child">Pellentesque</div>
    <div class="child">Aliquam lobortis</div>
</div>
.parent {
    display: table;
    border-collapse: separate;
    border-spacing: 25px;
}
.child {
    display: table-cell;
    padding: 2px 10px 5px;
    background: #eee;
    border: 1px solid #ccc;
    width:1%;
}

Upvotes: 0

Views: 62

Answers (1)

Bala
Bala

Reputation: 510

You haven't specified width for parent div.

Can you specify width as 100% for parent div and check

.parent {
    display: table;
    border-collapse: separate;
    border-spacing: 25px;
    width:100%
}

http://jsfiddle.net/23JEc/

Upvotes: 1

Related Questions