CODEWITHSUNDEEP
htmlcss
Alex Coplan
Alex Coplan

Reputation: 13361

Positioning of text relative to inline-block div

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.

Upvotes: 1

Views: 2048

Answers (2)

Rob W
Rob W

Reputation: 348972

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/

Upvotes: 3

Tetaxa
Tetaxa

Reputation: 4393

If you wrap both the label and the inputblock in a div and set vertical-align: top on that div you get what you want like this:

<div style="vertical-align:top;">
    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>
</div>

Not sure if there's a better way using negative margins and relative positioning.

EDIT This works for me in Chrome as well:

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

Upvotes: 0

Related Questions