CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

DIV not adjusted to text height. Why?

Do you know why my text is cut vertically? I would expect the <div> to adjust its height to the text's height. Thanks.

http://jsfiddle.net/6LdfQ/

<div class="wrapper">
<div class="block-left bigtext">left</div>
<div class="block-right">right</div>
</div>

.bigtext {
    color: #333;
    font-weight: 600;
    font-size: 53px;
    line-height: 12px;
    text-align: right;
}

.wrapper {
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    overflow: hidden;
    background:red;

}   

.block-left {
    float: left;
    box-sizing: border-box;
    padding-right: 20px;
    width: 50%;

}
.block-right {
    float: right;
    box-sizing: border-box;
    width: 50%;

}

Upvotes: 0

Views: 129

Answers (3)

Thafer Shahin
Thafer Shahin

Reputation: 874

It is because line-height css style remove:

line-height: 12px;

to let <div> adjust its height to fit text.

Upvotes: 2

PMG
PMG

Reputation: 190

It is correctly adjusting to the text height, which is set to 12px. Try this:

.bigtext {
    color: #333;
    font-weight: 600;
    font-size: 53px;
    text-align: right;
}

.wrapper {
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    overflow: hidden;
    background:red;

}   

.block-left {
    float: left;
    box-sizing: border-box;
    padding-right: 20px;
    width: 50%;

}
.block-right {
    float: right;
    box-sizing: border-box;
    width: 50%;

}

Upvotes: 1

Rahul
Rahul

Reputation: 5774

Corrected bigtext class.. 

.bigtext {
    color: #333;
    font-weight: 600;
    font-size: 53px;
    line-height: 64px;
    text-align: right;
}

Line height should always be greater than font size..

Upvotes: 2

Related Questions