CODEWITHSUNDEEP
htmlcss
Jon
Jon

Reputation: 437784

Table-like layout with two inline-block elements side by side?

I am building a web page that displays user information. It looks like this:

Things on a good day

As shown in the colored legend, the form contains a label and an ordered list. CSS has been used to give both display: inline and make the list appear as a comma-separated list of group names. Here's the relevant HTML fragment:

<label>Group membership</label>
<ol>
  <li>domain users</li>
  <li>denied rodc password replication group</li>
</ol>

The problem

The form's width as a whole is unknown (it's fluid). The label has a fixed width in order to support right-aligned text, but the ordered list is free to consume the rest of the available space horizontally.

However, this is what happens when the list of groups becomes large:

Things on a bad day

The list needs more space than is available horizontally, so it moves down and appears detached from the label and the label/display element alignment goes out the window. This looks really bad.

What I want to achieve

The list should expand downwards as necessary, but it should remain anchored next to the label (as would happen in a table-based layout where the two cells would have vertical-align: top).

Is there a CSS technique that will allow this easily? What would be the least invasive method to achieve the goal? There are tons of forms styled in the same manner throughout the app, so radically changing the CSS could easily impact some other form and for this reason would be impractical.

Surgically targeting the HTML for the list is possible, so feel free to recommend an alternative if that would help.

Here is a fiddle of a mockup with all the relevant styles that you can use as reference.

Upvotes: 0

Views: 209

Answers (1)

C3roe
C3roe

Reputation: 96424

Instead of using inline-block, float that particular label to the left, and make the list block with a margin-left – see http://jsfiddle.net/8tx24/1/

(I made the LI inline as well, because as inline-block the long value in the second LI might make it break into a new line, which looks kinda weird. But if you want that behavior, you can keep your inline-block.)

Upvotes: 2

Related Questions