'Text input - text appears at the middle?

So it's very simple but I can't find the answer. The text on my text field appears at the middle and I want it to appear at the top left corner like it normally does.

This is the CSS

.DivMessage {
        position: inherit;
        top: 460px;
        left: 290px;
        font-family: times, serif;
        font-size: 14px;
        border-bottom-right-radius: 20px;
        background-color: #cce4ff;
        width: 645px;
        height: 115px;
    }

And the Html is just

<input class="DivMessage" type="text">
csshtmltextinput


Solution 1:[1]

It seems as if you should be using a textarea here instead of an input, but, if for whatever reason I'm wrong and you need to use an input, you will want to lose the height and add some padding in order to align the text to the top:

.DivMessage {
    position: inherit;
    top: 460px;
    left: 290px;
    font-family: times, serif;
    font-size: 14px;
    border-bottom-right-radius: 20px;
    background-color: #cce4ff;
    width: 645px;
    padding: 0 0 115px;
}

http://jsfiddle.net/phJNn/

Notice how I removed the height and replaced it with 115px of padding on the bottom.

Solution 2:[2]

all you need is to do the text-align to any side, right, left or center. thank you.

.input {text-align:left;}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dryden Long
Solution 2 Ghoxt

Related Questions