Position two in-line divs at the bottom, one on each side

Question

Position two in-line divs at the bottom, one on each side

I am in search of a way to dynamically position two elements at the bottom of a container, making sure they are at opposite corners. Much like how the Stackoverflow Logo and the Ask Question are aligned at the bottom but on different ends of their container.

You can view the JFiddle demonstration here: http://jsfiddle.net/M5BuZ/

Additionally, I would prefer this setup to function without relying on adding a fixed margin space to the right element. This way, even if the height of the left element changes, the alignment will remain intact.

html css

Answer 1

Answer №1

It seems like only the left element will change in height. In that case, you can use the following CSS for your situation:

#container {
  border: 1px solid red;
  float: left;
  width: 400px;
  position: relative;
}
#left, #right {
  border: 2px solid red;
  background: #ccc;
  vertical-align: bottom;
  display: inline-block;
  /* ie6/7 */
  *display: inline;
}
#right {
  padding: 20px;
  width: 100px;
  position: absolute;
  right: 0;
  bottom: 0;
}

By setting the container's position to relative, you can position the right element absolutely without affecting the container's behavior (assuming the left element will always have a greater height than the right).

UPDATE: Check out the new jsFiddle

Answer 2

It seems like only the left element will change in height. In that case, you can use the following CSS for your situation:

#container {
  border: 1px solid red;
  float: left;
  width: 400px;
  position: relative;
}
#left, #right {
  border: 2px solid red;
  background: #ccc;
  vertical-align: bottom;
  display: inline-block;
  /* ie6/7 */
  *display: inline;
}
#right {
  padding: 20px;
  width: 100px;
  position: absolute;
  right: 0;
  bottom: 0;
}

By setting the container's position to relative, you can position the right element absolutely without affecting the container's behavior (assuming the left element will always have a greater height than the right).

UPDATE: Check out the new jsFiddle

Position two in-line divs at the bottom, one on each side

Answer №1

Similar questions

Ruby on Rails allows for the selection of values in a dropdown menu to trigger the visibility of different sections of HTML

Problems with script-driven dynamic player loading

Transforming a menu tab into an active anchor when navigating to a particular section

Issue with Flex property not being supported in Safari browser

Preventing automatic recompilation in Angular when there are changes in the assets folder

Conflicting Transformation Properties Causing CSS Issues Within a Single Element

The Django server fails to display the CSS files upon activation

Tips on connecting a font directory from FontAwesome

Can someone please clarify how the nth-of-type selector functions?

Whole page scrolling instead of just inner div scrolling

Tips for determining what elements are being updated in terms of style

Locate an element that is nested within a "concat(" XPATH using Selenium

Modifying the background hue of the element-ui tooltip

The image will remain hidden until it is fully loaded and ready to be displayed

Preventing scrolling on a YouTube video embed

Displaying a progress bar while fetching data in Vue: A step-by-step guide

Full-screen modal fade not functioning properly

When my webpage is opened in Firefox, I notice that it automatically scrolls down upon loading

Utilize data retrieved from an API to customize the appearance of buttons through the combination of React and Sass styling techniques

What are the specific pages on a three-page website that require canonical tags?