leave column in CSS

Question

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

So far I got a a two column layout: http://jsfiddle.net/uvg6f3tr/

All fields after "language" should be back in column1 or have a negative margin. I tried, but I cant "break out" of the second column and show the results below in the first column. If possible I'd like to escape the columns in general at this point.

help highly appreciated.

div.person dl {
    -webkit-column-count: 2;
    -moz-column-count: 2;
         column-count: 2;

 margin: 0px;
 width: auto;
}

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

<div class="inline dataplugin_entry person sectionedit2">
    <dl>
        <dt class="id">ID<span class="sep">: </span></dt>
        <dd class="id">1234</dd>
            
        <dt class="nachname">Nachname<span class="sep">: </span></dt>
        <dd class="nachname">Bob</dd>
        
        <dt class="vorname">Vorname<span class="sep">: </span></dt>
        <dd class="vorname">Smith</dd>
        
        <dt class="kanton">Kanton<span class="sep">: </span></dt>
        <dd class="kanton">ZH</dd>
        
        <dt class="rat">Rat<span class="sep">: </span></dt>
        <dd class="rat">NR</dd>
        
        <dt class="qry">xyd<span class="sep">: </span></dt>
        <dd class="qry">XYZ</dd>
        
        <dt class="fraktion">adsa<span class="sep">: </span></dt>
        <dd class="das">XYZ</dd>
        
        <dt class="funktion">asd<span class="sep">: </span></dt>
        <dd class="funktion">fasd</dd>
    
        <dt class="phone">Phone<span class="sep">: </span></dt>
        <dd class="phone">055 555 55 55</dd>
        
        <dt class="mail">Mail<span class="sep">: </span></dt>
        <dd class="mail"><a class="mail" href="mailto:hugo@boss.com">hugo@boss.com</a></dd>
        
        <dt class="website">Website<span class="sep">: </span></dt>
        <dd class="website"><a rel="nofollow" class="urlextern" href="http://www.url.com">http://www.url.com</a>

        </dd><dt class="twitter">twitter<span class="sep">: </span></dt>
        <dd class="twitter">test</dd>
        
        <dt class="language">Language<span class="sep">: </span></dt>
        <dd class="language">EN</dd>
        
        <dt class="topics">Topics<span class="sep">: </span></dt>
        <dd class="topics">tag1<span class="sep">, </span>tag2<span class="sep">, </span>tag3</dd>
        
        <dt class="intrests">Intrests<span class="sep">: </span></dt>
        <dd class="intrests">a, b, c</dd>
        
        <dt class="access">Zutrittsberechtigte<span class="sep">: </span></dt>
        <dd class="access">access</dd>
        
        <dt class="kommission">Kommission<span class="sep">: </span></dt>
        <dd class="kommission">xyz</dd>
        
    </dl>
</div>

Answer 1

The specification for CSS columns states that content should be balanced between columns - that is to say columns should have equal height.

Mozilla developer network states-

The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal.

This would at first glance seem to preclude arbitrary column breaks as you require.

There is a column-fill property which allows a change of this belancing behaviour, but it seems that this is currently only implemented in Firefox - it wouldn't by itself solve your problem anyway.

Where it could help, is by setting the height or max-height of the columns container (the definition list presumably) using a proportional unit - ideally EM - such that the columns are constrained just beyond the point where the language element is rendered. If the columns are laid out automatically based on flow, and not divided equally, this could have the effect of a single arbitrary column break.

Without this column-fill support, this will only work if the columns are reasonably balanced in terms of content before and after the desired element - or divided proportionately with the column count - but then if this was the case you probably wouldn't have a problem anyway.

What would seem tailor made to solve your problem is the break-after property which allows enforced column breaks as per the specification. Unfortunately, and entirely predictably, this is not yet widely supported according to the Mozilla Developer Network page (which may not be entirely accurate or up to date).

You probably need to use it with the propitiatory -webkit-column-break-after property for maximum compatibility, and combine it with the column-fill: auto value and setting the height to curtail the columns parent just below the language element to cover most of your bases (this would be principally to support Firefox).

It is of course worth noting that CSS columns themselves do not offer universal support - with Internet Explorer 9 support notably missing. As such less than universal support for your arbitrary column break is probably acceptable.

Answer 2

This might be a starting point

     dt, dd {
     display:inline;
 }
dd::after {
    content: '\A';
    display: block;
}