Arranging text in relation to an inline-block div

Having trouble with text positioning relative to an inline-block div positioned to the right? Check out this jsfiddle for a demonstration.

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;
}

Want the text next to 'Select Date' to be aligned with the top of the div on its right, not at the bottom. Any suggestions on how to achieve this without wrapping the label in a div?

Your advice on this issue would be greatly appreciated.

htmlcss

Answer №1

To align all child elements of inline elements to the top, you can use the CSS property vertical-align:top.

Simply add this line to your CSS:

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

Check out the demo here: http://jsfiddle.net/6CtT8/1/

Answer №2

To achieve the desired result, wrap both the label and the input block in a div element and apply vertical-align: top to that div as shown below:

<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>

Alternatively, you can also use negative margins and relative positioning.

UPDATE Another approach that works well in Chrome is styling the input block as follows:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Blending Grommet Theme with a touch of Custom CSS for Component Styling

I've been working on a React site that incorporates Grommet as the UX framework along with an embedded chat control. While everything is functional, the layout leaves much to be desired (see second image below). In the provided link, you can see that ...

cssreactjssassbotframework

How come the dark grey in CSS appears to be lighter than the standard grey hue?

JSBIN DEMO Could this be a mistake or is it a bug? Shouldn't the dark gray shade be darker than the default grey one? HTML <div class="lightgrey">Light Grey</div> <div class="grey">Grey</div> <div class="darkgrey">Dar ...

csscolors

align image vertically within a floated container

There are 5 floated divs with heights stretched to 100% of the document height using JavaScript. Each of the 5 divs contains an img element. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <lin ...

javascripthtmlcss

Ensuring fixed dimensions for divs (maintaining size irrespective of window width adjustments)

I'm struggling to find the right way to phrase my question, but I have a website example to help illustrate what I'm asking about. Check out this example website Upon resizing the browser window, only the margins of the website adjust and not t ...

htmlcss

Is injecting href using JavaScript causing issues with MSIE?

Is it considered poor practice to dynamically add href attributes via JavaScript, as shown in the code snippet below? I am experiencing a loading issue in IE8's status bar where it appears to continuously load even after the page has been updated. I s ...

javascripthtml

Prevent highlighting of empty spaces in HTML by disabling selection

My goal is to be able to identify the word that is clicked on screen using jQuery without selecting any white space. For example, if I click between the word "together" and the down arrow, it should not select anything in this scenario. To achieve this, I ...

htmlselect

Modifying the color of an empty string is not feasible in Javascript

Is it possible to change the color of FirstName only when there is text input? Currently, it turns green when there's text, but I want it to turn red when it's empty. How can this be achieved? $(document).on("click", '.btn-info.mailCo ...

javascripthtmlcssstring

The menu format is not functioning as I had anticipated

I am currently working on adding a menu to my website, but I am facing an issue with getting the sub menu items to display smaller text compared to the main menu item. Here is the code snippet I have been using: <asp:Menu ID="Menu1" runat="server" Orie ...

asp.netcss

Is there a way to organize radio buttons that are located within separate div tags together?

How can I ensure that only one radio button across different divs is selectable? <div><input type="radio" /></div> <div><input type="radio" /></div> <div><input type="radio" /></div> <div><i ...

jqueryhtmlcss

Sometimes the Select2 placeholder fails to show up consistently

After setting a placeholder for my select2 autocomplete, I noticed that when I move my cursor away from the input field, the placeholder disappears. However, I would like it to always remain visible. Below is the code I am using, and I hope to find a way ...

javascriptjqueryhtmlcssjquery-select2

How to Exclude Specific Div from CSS Stylesheet Styling

Currently, I am utilizing the bootstrap CSS framework for a specific page on my website. The issue arises when the CSS styling included in Bootstrap interferes with the formatting of my sidebar by changing its color, font size, and font family. Is there a ...

htmlcsstwitter-bootstrap

The menu was intended to be hidden when the mouse is moved away, but it actually hides

I'm facing an issue with my button and menu functionality. Even though I have coded the menu to hide itself when the mouse leaves, it hides before the mouse even goes over it. Any suggestions on how to resolve this? function showMenu() { var menu ...

javascriptjqueryhtmlcss

Blue text with the Bootstrap class ``btn-primary`` is a

When I implement twitter bootstrap into my .aspx page, the color of the text in the btn-primary appears blue instead of white. <asp:LinkButton ID="btnConfirm" runat="server" Text="Confirm" CausesValidation="true" ValidationGroup="req" CssClass="btn btn ...

htmlcssasp.nettwitter-bootstrap

Can someone explain why my button icons are not aligning to the center properly?

I have a small issue with the icons I pulled from react-icons - they appear slightly raised within the buttons. How can I position them in the middle? That's my only query, but I can't post it alone due to mostly having code in my post. What an ...

javascriptcssreactjs

Tips for aligning ticks to the left on a d3 bar chart

i recently finished creating a stacked bar graph with varying tick lengths on the y-axis side. my goal is to align the text within the ticks to the left, similar to this example: http://jsfiddle.net/2khbceut/2/ here is the HTML: <title>Diverging Sta ...

javascripthtmlcssd3.js

The issue is that only the first checkbox within ngFor is being toggled on and off each time a different checkbox is clicked

When I have checkboxes inside a ngFor loop and click on any one of them, only the first one gets checked and unchecked, updating only the status of the first checkbox. Here is the HTML template: <div *ngFor="let num of count" class="m-b-20"> & ...

javascripthtmlcssangularcheckbox

When the screen size decreases, HTML images do not adjust accordingly

Hey there, I'm just diving into the HTML and CSS world with FreeCodeCamp's curriculum. The second project involves creating a survey/form, which I've managed to put together quite nicely--except for one small issue with the images. While the ...

htmlcss

The text box remains disabled even after clearing a correlated text box with Selenium WebDriver

My webpage has two text boxes: Name input box: <input type="text" onblur="matchUserName(true)" onkeyup="clearOther('txtUserName','txtUserID')" onkeydown="Search_OnKeyDown(event,this)" style="width: 250px; background-color: rgb(255, ...

javascriptjavahtmlseleniumselenium-webdriver

Error message: The Modelviewer is unable to load the local file, displaying the message "Unauthorized to access local resource."

For my WebAR project, I am utilizing Google's ModelViewer. In my vue.js project, I have a component that loads the model using the <model-viewer> attribute. My goal is to set the src attribute of the model-viewer to the absolute path of the .gl ...

javascripthtmlvue.jsmodel-viewer

What is the best way to create a design with an image on the left and text on the right side?

I am trying to create a layout that features an image on the left and text on the right in a specific structure: Item 0: value 0 Item 1: value 1 Item 2: value 2 However, the text is appearing all in one row like this: Item 0: value 0 Item 1: value 1 Ite ...

htmlcssbootstrap-4