Question

I am trying to build a resume with pure HTML and CSS, and want to keep it as clean as possible. In this fiddle I’ve built the layout I want to achieve.

This is clearly not the prettiest solution, as it breaks if the entry “Languages” is a lot longer.

Rowspan is a bit cleaner, however two issues occur:

Firstly, whenever i add a new entry to the list, I’d have to increment the colspan (I don’t want to use any scripting, KISS).

Secondly, and more worryingly, the td:first-child selector doesn’t account for the rowspan. The wreckage can be seen in this fiddle

Another approach I’ve tried is to use a <ul> and then use an ul:before selector to prepend a block with the grey line and the “Languages” text. A new challenge appears: setting content on this pseudo-element will put it above the <ul>.

What do you think is the cleanest, leanest way of handling this situation?

Answer 1

How about using divs and float to make two columns? You could put whatever you wanted on the right side, table, ul, anything.

HTML

<div id="resume">
    <div class="category">Skills</div>
    <div class="left">Languages</div>
    <div class="right">asfd<br /> asfd<br /> asfd<br /> asfd<br /></div>
    <div class="divider"></div>

    <div class="left">Languages</div>
    <div class="right">asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /></div>
    <div class="divider"></div>

    <div class="category">Skills</div>
    <div class="left">Languages</div>
    <div class="right">asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /></div>
    <div class="divider"></div>
</div>

CSS

.divider {
    clear: both;
    padding-bottom: 10px;
}

.category{
    padding-left: 100px;
    font-weight: bold;
}

.left {
    float: left;
    width: 100px;
}
.right {
    float: left;
}

DEMO