CODEWITHSUNDEEP
htmlcss
Roman
Roman

Reputation: 3749

CSS div alignment

I'm having problem in alignment of a div. Please see following html. I have basically a form fiend with label and input field, and a <p> on the right of the input field. For some of the fields, the <p> element has small text, which fits on same line. But for some fields, it has more text which goes to 2 or 3 lines. How can I set the CSS of the <p> element that if its only one one line, then it should be displayed in the middle the input field, but if the text is over one line then it just goes up. Hope my question is clear. Thanks for any help.

HTML:

<div class="container">
<label>Label</label><input class="input" />
    <p>Lorem ipsum dolor.  </p>
</div>

CSS:

.container{
border:1px solid black;
    padding:20px;
    float:left;
}
label{
    line-height:2.5;
    float:left;
    border:1px solid green;
    width:60px;
    margin-right:10px;
}

input{
    border:1px solid green;
    height:34px;
    padding:4px 6px;
    width:200px;
    float:left;
    margin-right:10px;
}

p{
border:1px solid red;
    float:left;
    width:150px;
    line-height:15px;

}

jsFiddle: http://jsfiddle.net/JFjx4/

Upvotes: 1

Views: 566

Answers (4)

mixel
mixel

Reputation: 25836

Please, explain what you mean "it should be displayed in the middle the input field"? May be what you need is jsfiddle. I replaced 'float: left' in 'LABEL INPUT P' with 'display: inline-block' and added 'vertical-align: middle' in 'P'.

@Grigor: "text-wrap" is css3 feature. It can be inappropriate for @Roman.

Upvotes: 1

Kristian
Kristian

Reputation: 21810

I'm not one for recommending plugins because it generally doesn't help you learn... but in this case since you want different placements depending on length, AND because it sounds like you're using that for form validation... I'd recommend using the tipsy tooltip for this. its a pretty straightforward way to add messaging that also can move around your input element depending on your needs.

http://onehackoranother.com/projects/jquery/tipsy/

Upvotes: 0

Luke
Luke

Reputation: 2063

You could have a table for your form with 3 columns. The last one (with your p) you could style with vertical-align:middle in your css

Edit your jsfiddle html to this:

<div class="container">
    <table>
        <tr>
            <td><label>Label</label></td>
            <td><input class="input" /></td>
            <td style="vertical-align:center"><p>Lorem ipsum asdf asd </p></td>
        </tr>
    </table>
</div>

Upvotes: 0

Grigor
Grigor

Reputation: 4049

set a fixed width and put text-wrap: normal;

Upvotes: 0

Related Questions