Question

I have been given the following:

<div class="elf">Label 1</div>
<div class="eff">Data 1</div>

<div class="elf">Label 2</div>
<div class="eff">Data 2</div>

<div class="elf">Label 3</div>
<div class="eff">Data 3</div> 

What I need to do is to have the labels and data line up something like below. Label on top, Data directly below and Label and Data flowing left and continue flowing left after my dialog width is filled:

Label 1      Label 2        Label 3
Data 1       Data 2         Data 3

...

Label 9      Label 10        Label 11
Data 9       Data 10         Data 11

I tried a lot of different combinations of CSS but can’t get anything like this to appear. Here’s my latest CSS which doesn’t work:

.elf { margin: 1em 0 0 0; float: left; }
.eff { margin: 0.5em 0 0 0; display: block;  }

Can someone give me some advice on this? Link to fiddle example

Please note I can’t really add anything more to the HTML. All I can do is to change the CSS for this application.

Thank you

Answer 1

Assuming you cannot change the html in anyway (which you really should if you can), and can only edit css, you can do so with the following (assuming labels have a FIXED width):

.elf { margin: 0 0 0 0; display: inline-block;}
.eff { margin-left: -3em; display: inline-block; position: relative; direction: ltr; top: 1em;}

If you can change the html, this would make it a lot easier:

<div style="float:left">
    <div class="elf">Label 1</div>
    <div class="eff">Data 1</div>
</div>