CODEWITHSUNDEEP
csshtml
user1934575
user1934575

Reputation: 54

Text in div is automatically going to the bottom

My text is at the bottom of the div but it need to be at the top of the div.

Picture of the issue.

My CSS code:

#pagetitle
{
    float: left;
    width: 472px;
    height: 109px;
    font-size: 80px;
    font-family: 'CodePro';
    padding: 0px;
    margin: 0px;
}

html, body{
    margin:0 !important;
    padding:0 !important;
    opacity: 0.99;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

    background-color: #cfcfcf;
}

live preview is at link

Upvotes: 2

Views: 1302

Answers (5)

Debajyoti Das
Debajyoti Das

Reputation: 2138

If its an issue to use the line-height property. I always feel safe using...

position:relative;
top:-20px;

in

#pagetitle
    {
        float: left;
        width: 472px;
        height: 109px;
        font-size: 80px;
        font-family: 'CodePro';
        padding: 0px;
        margin: 0px;
        position:relative;
        top:-20px;
    }

Play around with top:-20px to get the desired result.

Upvotes: 0

Jose Vega
Jose Vega

Reputation: 10258

It seems like it has somethign to do with the font family(CodePro) you are using, if you change the font family to something like Helvetica, you would see the effect you would expect. You can adjust the position of the text in a couple of different ways.

margin-top: -30px;

or

line-height: 40px;

to the #pagetitle, to name a few.

Upvotes: 1

user1976613
user1976613

Reputation:

Try this:

#pagetitle
{
    line-height: 23px; /* or so, it depends on your need*/
}

Upvotes: 2

Christopher.Cubells
Christopher.Cubells

Reputation: 911

Add this to your css:

#pagetitle
{
    line-height: 10px;
}

Upvotes: 0

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

It is the font and size of the font that does it. You could give it some minus margin or some line height.

#pagetitle {
   margin-top: -30px;
}

Upvotes: 0

Related Questions