How can I position the label at the top?

Question

How can I position the label at the top?

Is it possible to align the label on top and select at the bottom within the given HTML structure as shown in the picture?

<div class="col">
<label for="foo">Select:</label>
<select id="foo" name="select">
   <option value="1">1</option>
   <option value="2">2</option>
</select>
</div>
<div class="col">
<label for="bar">Select any of the following:</label>
<select id="bar" name="select">
   <option value="11">11</option>
   <option value="22">22</option>
</select>
</div>

I have managed to align the label to the top and select to the bottom when in two separate div blocks using vertical-align property. However, I am curious to know if there is a way to achieve this without modifying the existing HTML code.

css

Answer 1

Answer №1

To ensure both columns have equal height, utilize Display: Table-cell:

div.col {
  display: table-cell;
    border: 1px solid blue;
    font-size: 300%;
    width: 300px;
    position: relative;
    padding-bottom: 40px; /* Space for the 'select'*/
}

select {
    position: absolute;
    bottom: 0;
    left: 0;
}

Here is a live demonstration in Chrome: http://jsfiddle.net/cM6Yp/

Answer 2

To ensure both columns have equal height, utilize Display: Table-cell:

div.col {
  display: table-cell;
    border: 1px solid blue;
    font-size: 300%;
    width: 300px;
    position: relative;
    padding-bottom: 40px; /* Space for the 'select'*/
}

select {
    position: absolute;
    bottom: 0;
    left: 0;
}

Here is a live demonstration in Chrome: http://jsfiddle.net/cM6Yp/

How can I position the label at the top?

Answer №1

Similar questions

Trouble with Materialize CSS: Form elements displaying incorrectly

What could be causing the Bootstrap Navbar toggle icon button to not display navigation items when clicked?

Using JavaScript to Sort and Filter HTML <optgroup> Elements

In Internet Explorer, regardless of how much scrolling occurs, the document.body.scrollTop property will consistently be

Is there a way to ensure that an image stays pinned to the bottom of the screen, regardless of the device or screen

Using ReactJS to create cross-browser inline styling with flexbox

Discovering the point of exit for a mouse from an image

Guide to setting a background image on a div when hovering using jQuery

What is the best way to ensure that child elements within a container div are centered when scrolling left and right?

Is it possible to create a blurred effect on an image while preserving the clarity of text within

"Discover the magic of creating a navigation menu with jQuery toggle - let me show

What is the best way to implement a sidebar closing animation?

Tips for placing an image in the bottom right corner of a frame

Unusual occurrence: unexpected positioning issue with iOS and Chrome (Windows)

Creating a div that spans the entire height from top to bottom

Troubleshooting a peculiar CSS margin problem exclusively in Internet Explorer

I am having trouble with my :hover selector being interrupted by text, what steps should I take to resolve this

Creating equal spacing between divs and the edges of the container

What are the implications of implementing this particular CSS code?

Ensure that two elements containing content of varying width are equal in width