Two columns using CSS, but with overflow issues

[UomoDelGhiaccio]

Trying to display a list of items from a detail table in two columns.

In this instance the various field values will be used along with a text label.

I’m using CSS to create the layout, but having an issue with overflow.

<code>ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;

}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;

}
#double li  { width:50%;} <span class="code-comment">/* 2 col */</span>
#triple li  { width:33.333%; } <span class="code-comment">/* 3 col */</span>
#quad li    { width:25%; } <span class="code-comment">/* 4 col */</span>
#six li     { width:16.666%; } <span class="code-comment">/* 6 col */</span></code>

My list is in a div and has the fields inserted

<div anchor="page_media_0"
style="position: static; overflow: hidden; box-sizing: border-box; width: 740px; top: 306.167px; left: 0px;" offset-x="37.79999923706055" offset-y="343.9669992370605">
    <code><ul id="double"> <span class="code-comment"><!-- Alter ID accordingly --></span>
<li>CSS: <span class="field1 ol-scripted">@field1@</span></li>
<li>XHTML: <span class="field2 ol-scripted">@field2@</span></li>
<li>Semantics: <span class="field3 ol-scripted">@field3@</span></li>
<li>Accessibility: <span class="field4 ol-scripted">@field4@</span></li>
<li>Usability: <span class="field5 ol-scripted">@field5@</span></li>
<li>Web Standards: <span class="field6 ol-scripted">@field6@</span></li>
<li>PHP: <span class="field7 ol-scripted">@field7@</span></li>
<li>Typography: <span class="field8 ol-scripted">@field8@</span></li>
<li>Grids: <span class="field9 ol-scripted">@field9@</span></li>
<li>CSS3: <span class="field10 ol-scripted">@field10@</span></li>
<li>HTML5: <span class="field11 ol-scripted">@field11@</span></li>
<li>UI: <span class="field12 ol-scripted">@field12@</span></li>
</ul></code>
</div>

The size of the area above can vary. This is what I’m getting and looking for ideas how to control the overflow.

[Marten]

The reason why you will have a visible overflow as result is because the unordered list (ul) element has been placed inside a ‘Positioned Box’ element.

As far as I can see is the only option you have–except for using a script–is to use the unordered list element as a ‘Inline Box’ element. And use CSS code like:

ul {
    font-size: 0; /* 1. */
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
ul li {
    display: inline-block;
    font-size: 16px; /* 1. */
    width: 50%;
}
/* 1. Trick to remove the space between 'display: inline-block' elements */

Please note that this will result in a two column layout like:

list-item-1 | list-item-2
list-item-3 | list-item-4
list-item-5 | list-item-6