Question

Hi I have a simple question using html and css… hopefully someone can help me to have a “duh” moment.

Here is the jsfiddle.

I’m planning on having event dates on the left and event information on the right side, wanting a two column look… and with what I have right now, the information wraps around to the beginning, aligning itself with the date. I want the info to align.

I know I can easily accomplish this either with a div-float or using a table, but I don’t want either of those. Maybe I’m using the wrong elements.. not sure.

Thanks in advance.

Answer 1

Here’s an alternative solution, using a dl, but it assumes that you have .clearfix included in your styles.

HTML:

<dl id="container" class="clearfix">
    <dt>05/31/12</dt>
    <dd>The first event looks like this. It has to wrap around.</dd>
    <dt>06/01/12</dt>
    <dd>The second event looks like this. It has to wrap around too.</dd>
    <dt>06/01/12</dt>
    <dd>Thesecondeventlookslikethis.Ithastowraparoundtoo.</dd> 
</dl>

CSS:

dl#container{
    width:270px;
    background-color:#e9cfa7;
}

dt{
    clear:left;
    float:left;
    width:25%; 
    margin-right:2%;
    background-color:#5d396e;
}

dd{
    width:70%;
    float:left;
    display:inline-block;
    word-wrap:break-word;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */