CODEWITHSUNDEEP
htmlcss
ncf
ncf

Reputation: 556

align a paragraph

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.

Upvotes: 3

Views: 147

Answers (4)

Timbadu
Timbadu

Reputation: 1551

#container p {position: relative; padding: 0 4px 4px 80px;}

#container p span {background-color: #5d396e; color: #FFF;  display:block; width: 60px;position: absolute; left: 4px; top: 4px; padding: 4px}

Upvotes: 1

MetalFrog
MetalFrog

Reputation: 10543

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 */

Upvotes: 1

Robert Niestroj
Robert Niestroj

Reputation: 16151

Try this CSS in your fiddle:

#container {
    width: 270px;
    background: #e9cfa7;
}
#container p:not(span) { padding-left: 70px }
#container p span {
    background-color: #5d396e;
    float: left;
    display: block;
    width: auto;
    margin-left: -70px;
}

Upvotes: 1

David Thomas
David Thomas

Reputation: 253506

I'd suggest a negative text-indent coupled with a margin-left of the same amount:

#container p {
    text-indent: -4em;
    margin-left: 4em;
}

JS Fiddle demo.

Upvotes: 2

Related Questions