How can I produce this table-like layout using CSS

Question

I am not very good with CSS. I know a lot of the properties but I am a bit green when it comes to floating divs and more advanced aspects.

I want to reproduce this layout, not using a HTML table, which I know is not semantically good.

http://jsfiddle.net/hkCcY/3/

<table class="selection">
<tr>
    <td rowspan="3" class="type">dui</td>
    <td rowspan="3"><img src="holder.js/35x35" /></td>
    <td class="name">Phasellus convallis pellentesque erat</td>
    <td><strong>Quisque:</strong> eu dui vitae</td>
</tr>
<tr>
    <td><strong>Feugiat:</strong> interdum vitae</td>
    <td><strong>Cras:</strong> at mauris eros</td>
</tr>
<tr>
    <td><strong>Vivamus:</strong> id odio mi</td>
    <td><strong>Duis:</strong> tellus sapien</td>
</tr>
</table>

I would like to use this markup (or very similar - suggestions welcome!):

http://jsfiddle.net/rG2Ea/3/

<div class="selections-item selection-win">
<div class="selection-type">dui</div>
<img class="selection-icon" src="holder.js/35x35" alt="-"/>
<ul class="selection-list">
    <li class="selection-name">Phasellus convallis pellentesque erat</li>
    <li class="selection-attr"><strong>Quisque:</strong> eu dui vitae</li>
    <li class="selection-attr"><strong>Feugiat:</strong> interdum vitae</li>
    <li class="selection-attr"><strong>Cras:</strong> at mauris eros</li>
    <li class="selection-attr"><strong>Vivamus:</strong> id odio mi</li>
    <li class="selection-attr"><strong>Duis:</strong> tellus sapien</li>
</ul>
</div>

But as you can see at jsfiddle in my attempt at the CSS the layout is horrible. The problems I have are:

• The 'row span' of the selection-type and the image so they centre align vertically in the container
• Getting the list item elements to get the correct width so they stack on top of each other. I want two on each line like in the table
• Getting it to be fluid - extend to 100% width in the parent

Answer 1

Without understanding what the elements represent, this is probably your best balance of easy to implement CSS and semantic markup.

http://cssdeck.com/labs/zrzoossj

.selections-item {
  display: table;
  width: 100%;
}
.selection-win {
    background-color: blue;
    color: white;
}
.selection-type,
.selection-icon,
.selection-list {
  display: table-cell;
}
.selection-type {
    text-transform: uppercase;
    width: 100px;
    vertical-align: middle;
    text-align: center;
}

.selection-icon {
  vertical-align: middle;
}
.selection-list dl {
    columns: 2;
}

.selection-list {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}

.selection-list h1 {
  font-size: inherit;
  margin: 0;
}

.selection-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="selections-item selection-win">
  <div class="selection-type">dui</div>
  <div class="selection-icon"><img src="http://placehold.it/35x35" alt="-" /></div>
  <div class="selection-list">
    <h1>Phasellus convallis pellentesque erat</h1>

    <ul>
        <li><strong>Quisque:</strong> eu dui vitae</li>
        <li><strong>Feugiat:</strong> interdum vitae</li>
        <li><strong>Cras:</strong> at mauris eros</li>
        <li><strong>Vivamus:</strong> id odio mi</li>
        <li><strong>Duis:</strong> tellus sapien</li>
    </ul>
  </div>
</div>

The list looks like it might be more appropriate as a definition list, but getting the CSS to display as desired is more trouble than it's worth.

Answer 2

You do take quiet an advanced case for starting to learn floats, but I gave it a try and this is what I came up with: http://jsfiddle.net/rG2Ea/4/

As an answer to your questions:

• The row span is actually not possible to achieve with just floats and no js. Aligning vertical is just a b*tch in css. That is why I postioned the icon and type absolute. I centered them vertically by setting the top to 50%, and the margin-top to halve their height. The left position is just a matter of playing with the pixel values.
• By adding some padding-left to the ul I made some space for the icon and type, since positioning them absolute lifts them out of the flow of the document (they do longer 'push' on their siblings). Since the ul is a non floating block level element, it will automatically fill up the full width of it's parent, giving you the 100% fluid width you wanted.
• Due to the above changes, the width:50% works fine now on the li and you get the two nice columns you wanted. Do make sure not to add any horizontal padding or margin to them, as this will cause them to appear all in one column.

The relevant css looks like this:

.selection-type {
    text-transform: uppercase;
    width: 50px;
    position: absolute;
    line-height: 35px;
    left: 15px;
    top: 50%;
    margin-top: -17px;
}

img.selection-icon {
    position: absolute;
    height: 35px;
    width: 35px;
    left: 65px;
    top: 50%;
    margin-top: -17px;
}
.selection-list {
    padding-left: 125px;
    overflow: hidden;
}

Hope this helps you on the way. Feel free to ask if you want me to explain further.

Answer 3

You need to add floats align the first blocks on left side and give them proper width and margin left to align properly.

An example could be:

.selection-type, .selection-icon, .selection-list {float: left}
.selection-type {width: 100px;}
.selection-icon {margin-left: 100px; width: 50px;}
.selection-list {margin-left: 150px;}