Question

I’m having a problem with the positioning of text relative to an inline-block div to the right of it. Here’s a jsfiddle which demonstrates this problem.

And here’s the demo HTML/CSS:

HTML

Select Date:
<div class="inputblock">
    <input type="radio" name="dateselect" value="0" />Todays Date<br />
    <input type="radio" name="dateselect" value="1" />Another Date
</div>

CSS

.inputblock {
    display:inline-block;
    background-color:#DDD;
}

What I want is for the text to the left of the block of radio buttons which says ‘Select Date’, to be positioned next to the top of the div to the right of it, not at the bottom. How can I achieve this? Will I have to wrap the label in a div?

I would appreciate any advice with this issue.

Answer 1

All childs of inline elements can be vertically positioned at the top using the vertical-align:top CSS property.

So, your CSS needs one extra line:

.inputblock {
    display:inline-block;
    background-color:#DDD;
    vertical-align: top;
}

Fiddle: http://jsfiddle.net/6CtT8/1/