Adjustable CSS display: an adaptable left column paired with a changeable fixed right column

Question

Adjustable CSS display: an adaptable left column paired with a changeable fixed right column

I am looking to align the content of a div element in a single row while dealing with an unknown width of the ul element due to varying child li elements. The h2 will always take up the remaining space, and each li element has a width of 20px.

The desired layout would resemble this:

|----h2------------|li|li|li||
|----h2---------------|li|li||

Here is the HTML code structure:

<div>
<h2>name</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

I have come across several solutions online but I am unsure which one to choose (best practice vs workaround). Browser compatibility is not an issue as it only needs to function on the latest version of Chrome.

Update: There will be multiple rows of div elements and it is important for the li elements to align properly.

html css

Answer 1

Answer №1

The most efficient and streamlined method is to utilize floats. If the elements vary in size, but specific dimensions are unknown, there are two highly adaptable approaches.

Here's how it can be done using display: table:

http://jsfiddle.net/8uTfp/1/

div {
    display: table;
    width: 100%;
}

h1, ul {
    display: table-cell;
    vertical-align: middle;
}

ul {
  text-align: right;
}

li {
  display: inline-block;
}

Alternatively, this is how it could be achieved with flexbox:

http://jsfiddle.net/8uTfp/

div {
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

ul {
  margin-left: auto;
}

li {
  display: inline-block;
}

Answer 2

The most efficient and streamlined method is to utilize floats. If the elements vary in size, but specific dimensions are unknown, there are two highly adaptable approaches.

Here's how it can be done using display: table:

http://jsfiddle.net/8uTfp/1/

div {
    display: table;
    width: 100%;
}

h1, ul {
    display: table-cell;
    vertical-align: middle;
}

ul {
  text-align: right;
}

li {
  display: inline-block;
}

Alternatively, this is how it could be achieved with flexbox:

http://jsfiddle.net/8uTfp/

div {
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

ul {
  margin-left: auto;
}

li {
  display: inline-block;
}

Answer 3

Answer №2

One possible solution is to align the h2 to the left and the ul to the right.

div h2 { float: left; }
div ul { float: right; }

Answer 4

One possible solution is to align the h2 to the left and the ul to the right.

div h2 { float: left; }
div ul { float: right; }

Answer 5

Answer №3

If you have fixed and known values for the height of the div and list items, consider using the following CSS with added classes:

.container{
  height: 30px;
  position: relative;
}
.container ul{
  padding: 0; margin: 0;
  /* Other reset rules here ... */
  position: absolute;
  top: 0;
  right: 0;
}
.container ul li{
  display: inline;
  float: left;
  height: 30px;
  /* Other format rules here ... */
}

If you omit specifying the height of the div, it will be determined by the h2 element's metrics as absolutely positioned elements do not affect the layout. Hope this explanation is helpful.

Answer 6

If you have fixed and known values for the height of the div and list items, consider using the following CSS with added classes:

.container{
  height: 30px;
  position: relative;
}
.container ul{
  padding: 0; margin: 0;
  /* Other reset rules here ... */
  position: absolute;
  top: 0;
  right: 0;
}
.container ul li{
  display: inline;
  float: left;
  height: 30px;
  /* Other format rules here ... */
}

If you omit specifying the height of the div, it will be determined by the h2 element's metrics as absolutely positioned elements do not affect the layout. Hope this explanation is helpful.

Adjustable CSS display: an adaptable left column paired with a changeable fixed right column

Answer №1

Answer №2

Answer №3

Similar questions

Tips on utilizing the getElementsByClassName method in JavaScript

How to Handle Tab Navigation on a Mobile Website without Javascript?

Protect database entries from cross-site scripting attacks

Is there a way to center a particular flex item horizontally within its parent container?

Issues with Font-Face Implementation

Tips for defining conditions within the style attribute in JSP

Having trouble with implementing ng-hide and ng-show functionality

Creating a dropdown navigation menu using jQuery

What is the best way to extract data from the ajax.done() function?

Navigation Menu Dropdown Present on the Right Side and Arranged in a Horizontal Stack

Why is it that styling <div> and <img> with a URL doesn't seem to work, even when applying the same styles?

Updating rows within a table dynamically using AJAX

Guide to customizing the CSS styles of various components within a Material UI Dialog

Creating columns with equal heights in Bootstrap 3 without compromising on the column padding

The font sizes appear larger when styled with HTML compared to using Photoshop

"Encountering issues with calling a Node.js function upon clicking the button

Is there a JavaScript toolkit specifically designed for animating mobile devices?

I'm having trouble with getting my Bootstrap CSS and JS links to function properly

Converting an HTML table into a visual image

How can I extract data from HTML popup tables and charts using Python?