Search code examples
htmlcsscss-floatdokuwiki

CSS: splitup fields in two columns

I have some html-output, which i'd like to format better with css. I have no influence on how the html is generated.

I want to have two columns, depending on the class. I could use static positions for every field, but if a field is missing in data, there will be a gap.

This is what I search for. (as you see, the order is diffrent)

desired result

how to put the fields in a column, and deal with height dynamically? help highly appreciated.

cheers endo

<div class="inline dataplugin_entry person">
    <dl> 
        <dt class="id">ID<span class="sep">: </span></dt>
        <dd class="id">487</dd> 
        
        <dt class="wsid">wsID<span class="sep">: </span></dt>
        <dd class="wsid">2129</dd> 
        
        <dt class="aktiv">aktiv<span class="sep">: </span></dt>
        <dd class="aktiv">1</dd> 

        <dt class="nachname">Nachname<span class="sep">: </span></dt>
        <dd class="nachname">Smith</dd> 
        
        <dt class="vorname">Vorname<span class="sep">: </span></dt>
        <dd class="vorname">Bob</dd> 
        
        <dt class="kanton">Kanton<span class="sep">: </span></dt>
        <dd class="kanton">ZH</dd>
    </dl>
</div>

Solution

  • Because you didn't specified how many items you want to place in one column, I can advice on taking advantage of column-count css3 property. What it does is it will make browser to evenly distribute the content of element in exactly that number of columns. So in your case I assumed 2: 

    <div class="inline dataplugin_entry person">
    <dl> 
        <dt class="id">ID<span class="sep">: </span></dt>
        <dd class="id">487</dd> 

        <dt class="wsid">wsID<span class="sep">: </span></dt>
        <dd class="wsid">2129</dd> 

        <dt class="aktiv">aktiv<span class="sep">: </span></dt>
        <dd class="aktiv">1</dd> 

        <dt class="nachname">Nachname<span class="sep">: </span></dt>
        <dd class="nachname">Smith</dd> 

        <dt class="vorname">Vorname<span class="sep">: </span></dt>
        <dd class="vorname">Bob</dd> 

        <dt class="kanton">Kanton<span class="sep">: </span></dt>
        <dd class="kanton">ZH</dd>
    </dl>
</div>

    CSS 

    dl {
    -webkit-column-count: 2;
    -moz-column-count: 2;
         column-count: 2;
}

dt { clear:left }
dt, dd { float:left }

    Example on fiddle is here - http://jsfiddle.net/dvbdkr28/2/

    Browser support pretty decent so all modern browsers supports it, plus IE10 and above. On mobiles support reaches as far as Android 2.3 and above.

    Hope this will help