CODEWITHSUNDEEP
htmlcss
Snabow
Snabow

Reputation: 331

Set the same height for two div in CSS

I'm trying to align two div on the same line. No problem for that, but now I'm looking for a solution to have the same height on each div, the problem is that the first one contain only an icon and the second contain text that will probably take more space than the icon. I'm looking for a css property than can help me to do this...

.zone-info {
    background-color: #e0f1f5;
    line-height: 1.363em;
    margin-bottom: 3px;
    padding: 5px 0;
}

.zi-icon {
    display: inline-block;
    float: left;
    text-align: center;
    vertical-align: center;
    height: 100%;
    width: 10%;
}

.zi-text {
    width: 90%;
    display: inline-block;
    float: left;
}
<div class="zi-icon zone-info">icone</div>
<div class="zi-text zone-info">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.<br>
    # Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.<br>
    # Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</br>
    # Sed ut perspiciatis unde omnis iste natus error sit. 
</div>

Here is a Jsfiddle of what I do for the moment. http://jsfiddle.net/nc6L227z/

Upvotes: 2

Views: 7645

Answers (4)

yunzen
yunzen

Reputation: 33439

You could have the right one be contained in the left one.

.col1 {
    float: left;
    border: 1px solid green;
    margin-right: 200px;
    background: red;
}

.col1-content {
    float: left;
    width: 50px;
}
.col2 {
    float: left;
    background: green;
}
.col2-content {
    width: 200px;
    
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}
<div class="outer">
    <div class="inner clearfix">
        <div class="col1">
            <div class="col1-content">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="col2">
                <div class="col2-content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni excepturi animi vitae saepe ratione cumque nostrum eius impedit delectus quibusdam eaque earum et iusto quam soluta. Expedita eius perspiciatis necessitatibus facilis dignissimos quis velit maiores incidunt sequi odio non reprehenderit ut cum perferendis enim. Eligendi fugit nesciunt dolore aliquam numquam.
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 2

kapantzak
kapantzak

Reputation: 11750

Wrap the two divs in a .wrapper element and give display: table. Then give display: table-cell to the inner divs and remove float:left and display: inline-block from the other elements:

EDIT: (vertical align added)

Check the Updated DEMO

.wrapper { display: table }
.zone-info {
    background-color: #e0f1f5;
    display: table-cell;
    line-height: 1.363em;
    vertical-align: middle;
}

.zi-icon {
    text-align: center;
    width: 10%;
}

.zi-text {
}

Upvotes: 6

Suraj Rawat
Suraj Rawat

Reputation: 3763

You can use table-cell or a new css property flex 

 div{display:flex} //you don't need float , inline-block, table cell anythng

DEMO

Upvotes: 2

ArinCool
ArinCool

Reputation: 1738

Check Fiddle

I have added a parent div and applied height on it.

Upvotes: 0

Related Questions