CODEWITHSUNDEEP
htmlcss
cusX
cusX

Reputation: 500

How to fixed heading into two lines despite content being only one line

How can I fixed my link heading into two lines despite the text being only one line?

CodePen Link to Problem

When the heading is only one line, the position of the Comment and Like button becomes inconsistent, as shown HERE .

I tried using floats to no avail. Then I tried setting the position of the div.info relative and having my comment and like button to absolute so that I can take them out of the document flow, but somehow, the comment and like button is still following the document flow.

.info
    height: 20em
    position: relative

.comment
    position: absolute
    margin-top: -1.5em
    font-size: 1.2em
    float: left
    padding-left: 3em
    a
        text-decoration: none
        color: white
        &:visited
            color: white
            font-weight: 700
.like
    margin-top: -1.5em
    font-size: 1.2em
    position: absolute
    top: 0
    bottom: 20px
    right: 20px
    // float: right
    padding-right: 3em

Upvotes: 0

Views: 59

Answers (2)

Saphirel
Saphirel

Reputation: 42

You have too consider your buttons as the footer of each part. Put the two buttons (comment and like) in the same div, and add it : 

position: absolute;
bottom: 0;

to the div's class.

My screen seems to be larger than yours : every title is in one line, so buttons are always up. More, be carefull : when i scroll down the page slide too speed, so I can't read your last item.

Upvotes: 1

Keammoort
Keammoort

Reputation: 3075

Try this (remove all the other styles for these elements):

.like {
    padding-right: 3em;
    float: right;
    font-size: 1.2em;
}

.comment {
    padding-left: 3em;
    float: left;
    font-size: 1.2em;
}

.info:after, .comment:after, .like:after {
    content: "";
    display: table;
    clear: both;
}

That last part is to fix divs height, notice how their height is smaller than inside content due to floating. Sometimes you force the height, but it's usually not good - for instance .info div has 20em height, but see in browser inspector when the browser thinks it is.

Also, if you would like to have more margin at the bottom just add:

.info {
    margin-bottom: 30px;
}

Upvotes: 1

Related Questions