align taller block to the right of shorter block

Question

How can I make this work as in the image below:

<ul style="width:16em;list-style:none;padding-left:0">
  <li><label>name:</label><span>whatever</span></li>
  <li><label>categories:</label>
    <ul class="flat"><li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
   </li>
</ul>

.flat {list-style:none}
.flat li {display:inline; padding-left:0}
label {float:left;width:7em;}

I mean, I want the second line of li items left aligned by the first line of li items. "item 1" is fine, the others should align by it. (revised upon comments)

desired result

I arrived to a "solution" here: http://jsfiddle.net/8A7UK/ I'm using div/span instead of ul/li. Not ideal and I don't understand why the same styles will not work with ul/li — koriander, Feb 03 '14 at 21:32

score 3 · Answer 1 · answered Feb 03 '14 at 15:50

3

Remove width:11em;, they just don't fit in.

answered Feb 03 '14 at 15:50

Kuzgun

4,649
4
34
48

No can do, I want it because of alignment with other items not present in the sample. – koriander Feb 03 '14 at 16:13
Then you can set width:auto; this will allow it to have just enough space to fit in. – Kuzgun Feb 03 '14 at 16:15
I mean, there are other li/labels outside the list you see, I use a standard width for all of them. – koriander Feb 03 '14 at 16:20
We can make a better comment if we can see whole page. – Kuzgun Feb 03 '14 at 16:21

score 3 · Answer 2 · answered Feb 11 '14 at 22:35

This is a definition list, so use the proper <DL> element (definition list) instead of a <UL>. Then, you can accomplish everything you would like to in two short lines of CSS.

http://jsfiddle.net/smclark89/tkUjc/

<dl>
<dt>name:</dt>
<dd>
    <ul>
        <li>Whatever</li>
    </ul>
</dd>
<dt>categories:</dt>
<dd>
    <ul>
        <li><span>item 1</span></li>
        <li><span>item 2</span></li>
        <li><span>item 3</span></li>
        <li><span>item 4</span></li>
    </ul>
</dd>

dt { float:left; }
dd li { list-style-type:none; }

score 2 · Answer 3 · answered Feb 11 '14 at 19:13

Your markup seems totally fine, and I'm not quite sure why there seems to be issues achieving what you want. It's pretty straightforward stuff unless I am missing something:

http://jsfiddle.net/ryanwheale/UhQ9W/9/

My solution positions the label and whatever is next to it right next to each other. Since your outer element is 16em, we make the width equal 16 (note, you could also use percentages):

label:first-child {
    float: left;
    width: 7em; /* magic number: 9 + 7 = 16  (7 / 16 = 43.75%) */
}

label:first-child + * {
    float: left;
    width: 9em; /* magic number: 9 + 7 = 16 (9 / 16 = 56.25%) */
}

Then, for the "flat" items, we simply float them next to each other and give them a width of 50%:

.flat li {
    float: left; 
    width: 50%;
}

Note: if you want to add padding to anything, I suggest adding box-sizing: border-box; to anything which is being floated.

Also, floats might give you issues when things start to expand and wrap... so there is another solution with inline-block which will solve this. Let me know how this works and I can provide a better solution if you have issues with things not lining up properly once real content is in there.

Alex W · Answer 4 · 2014-02-03T17:08:56.180

Remove the float, the display:inline (unless you want them to display next to eachother) and just use text-align and then use list-style-position:inside; to fix the bullets:

<ul style="width:13em; border:1px">
    <li><label style="text-align:left; width:7em">test</label>
        <ul style="text-align:right;list-style-position:inside;">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>
   </li>
</ul>

Also, you shouldn't use inline CSS (style attribute) that is bad practice.

Without display:inline jsFiddle

With display:inline jsFiddle

Ghost Echo · Answer 5 · 2014-02-12T16:41:02.600

1

Slight modifications to your CSS file:

notes:
-using a clear after every odd <li> sets the beginning of the next <li>to the far end of the next line.
-adding float:left; to .flat sets the first <li> inline with the label.

CSS

.flat {list-style:none;float:left;}
.flat li {display:inline; padding-left:0;}
label {float:left;width:7em;}
ul {padding:0px;}
li {float:left;}
ul .flat li:nth-child(odd) {clear:both;}

EXAMPLE http://jsfiddle.net/UhQ9W/19/

edited Feb 12 '14 at 16:41

answered Feb 03 '14 at 15:52

Ghost Echo

1,997
4
31
46

that doesn't work, it sends the ul to the second line – koriander Feb 03 '14 at 16:17
this is a good post explaining different ways to position ``. (where I removed the `float` in your code http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell – Ghost Echo Feb 03 '14 at 16:48
thanks, but that only works if the list can fit in the first line. if I reduce the width of the outer ul it falls into the second line as whole. – koriander Feb 03 '14 at 16:54
i'm not sure what you're trying to achieve or why that would be a problem. maybe you could remove the `ul` width altogether. – Ghost Echo Feb 03 '14 at 16:59
I want to achieve what is in revised http://jsfiddle.net/aBVd3/20/ except item3 and item4 are left-aligned by item1 item2 (without dropping into the scond line). I can't remove the ul since it is a box in the page that should not be wider. – koriander Feb 03 '14 at 17:06
so you want item3 item4 on the same line as item1 item2? or below item1 item2? – Ghost Echo Feb 03 '14 at 18:06
below, see the image in the revised post – koriander Feb 03 '14 at 20:51
updated again. That's gotta be what you're looking for. HTML is the same, only CSS has been modified. – Ghost Echo Feb 12 '14 at 16:28

score 1 · Answer 6 · answered Feb 05 '14 at 17:56

1

here is a way of doing it, in case you can restructure the html as well. See it on JSFiddle

<ul>
  <li><label>name:</label>
      <ul class="flat">
          <li>whatever</li>
      </ul></li>
  <li><label>categories:</label>
    <ul class="flat">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
   </li>
</ul>

ul {
    list-style: none;
    padding: 0;
}

label {
    display: inline-block;
    width: 4.5em;
}

.flat {
    display: inline-block;
    vertical-align: top;
    width: 6em;
    margin-bottom: .5em;
}

.flat li {
    display: inline-block;
}

answered Feb 05 '14 at 17:56

Marcello

156
1
3

What do you mean by "restructure"? You put an "ul .flat" after the first label, but I don't see why. is that it? – koriander Feb 05 '14 at 19:34
I meant in case you can edit the html on the page, which is not always the case (in some projects, a designer might not have access to the html or JSPs, just css). I put the flat class there to leverage the same style for both – you can also remove the .flat from the html and replace the occurrences of .flat on your CSS to "ul". Clear enough? Cheers – Marcello Feb 06 '14 at 22:04
Marcello, @ausi has provided an answer which I think is better since it is simpler. Therefore I appologise to you but when the bounty period ends I intend to accept ausi's answer instead of yours. This is in accordance with SO policy. – koriander Feb 09 '14 at 10:57

score 1 · Answer 7 · answered Feb 08 '14 at 07:29

Additional styles are need to make this work. Switching to floats and using percentages for the widths makes it possible to aligned the label and content on the right properly.

Here's the updated styles

.flat {
    list-style:none;
    float: left;
    width: 64%;
    padding: 0;
    margin-left: -0.75em;
    overflow: hidden;
}
.flat li {
    float: left;
    width: 38%;
    padding-left: 0.75em;
}
label {
    float:left;
    width:35%;
}

http://jsfiddle.net/QhSC9/

If you are able to update the markup, I'd recommend you look into dl.

Thanks for your answer EmileKumfa, I had already accepted the one from Marcelo before you posted yours, and his avoids float which actually I prefer. — koriander, Feb 08 '14 at 20:51

score 1 · Accepted Answer · edited Feb 12 '14 at 14:30

1

Add padding-left: 7em; to .flat: fiddle

Or add float: left; width: 9em; padding: 0; to .flat: fiddle

edited Feb 12 '14 at 14:30

Peter Bratton

6,302
6
39
61

answered Feb 09 '14 at 00:19

ausi

7,253
2
31
48

1

FYI, I chose this answer (1st one) because it is the one that makes minimal changes in what I had, easy to understand, easy to maintain. – koriander Feb 12 '14 at 19:40

yunzen · Answer 9 · 2014-02-13T12:58:51.873

1

Use overflow: hidden on the ul

http://jsfiddle.net/HerrSerker/UhQ9W/8/

.flat {
    list-style:none; 
    overflow:hidden; 
    padding:0
}

The overflow: hidden changes the block formatting context of the .flat element as described here

edited Feb 13 '14 at 12:58

answered Feb 11 '14 at 12:41

yunzen

32,854
11
73
106

your solutions works for the concrete example but how do I know that I'm not going to have hidden content with different data? I don't even understand why it works in this example, can you explain? – koriander Feb 11 '14 at 20:12
You see, the overflow changes the block formatting context: In this example I show the difference with border for visual aid: http://jsfiddle.net/UhQ9W/14/ – yunzen Feb 12 '14 at 08:49

vorillaz · Answer 10 · 2014-02-12T19:23:50.553

1

I have set the list items floating and clearing the floated elements every third one in order to create the layout you have attached above. Keep in mind that this demo is width agnostic. All the tricks lays in this line of code

.flat li:nth-of-type(3n) {
    background:#ff0000;
    clear:left;
}

http://jsfiddle.net/QhSC9/

edited Feb 12 '14 at 19:23

answered Feb 11 '14 at 22:18

vorillaz

6,098
2
30
46

RubenGeert · Answer 11 · 2014-02-12T14:47:38.923

1

@smclark89: agree, I'd say a <dl> seems more appropriate here too. The cleanest I can come up with is this jsfiddle

edited Feb 12 '14 at 14:47

answered Feb 12 '14 at 14:41

RubenGeert

2,902
6
32
50

score 0 · Answer 12 · edited Jun 20 '20 at 09:12

0

Check this out. I know that this isn't the proper way to do it but based on the other answers you cannot change major elements/tags also styles.

Fiddle

CSS

label {
    clear:left;
    float:left;
    width:7em;
    height:22px;
}

I just added height:22px and clear:left to create your desired output.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 06 '14 at 06:52

Adrian Enriquez

8,175
7
45
64

1

thanks for trying, but lists have variable sizes, I can't use height limits. – koriander Feb 06 '14 at 21:53

align taller block to the right of shorter block

12 Answers12

Fiddle