CSS Text Columns

Question

I'm currently learning HTML/CSS and have come across a challenge around text columns. I'm trying to recreate www.campaignmonitor.com as a practice exercise.

Here's the challenge:

I have a text area using a two column layout, featuring 4 paragraphs of text. I'd like to keep the top two paragraphs aligned on the top edge, and the lower two paragraphs also aligned on their top edges. In other words, if either of the top paragraphs increase in height, the lower two paragraphs will both move down together.

I appreciate this may be a basic question for you CSS pro's, but I'm stumpted with this one and online resources, tutorials and other sites have given me no success.

All help is appreciated!

Tom

Here's the code I'm using:

<div class="content">
    <div class="row1">
    <div class="col1a">
        <h4>Create & send beautiful emails</h4>
        <p>Design great looking emails using your own tools, or create templates and let your clients send their own.</p>
    </div><!-- /end #col1a -->
    <div class="col2a">
        <h4>Manage lists & subscribers</h4>
        <p>We handle signups, unsubscribes and bounces automatically. Easily create targeted segments of subscribers.</p>
    </div><!-- /end #col2a -->
    </div><!-- /end #row1 -->
    <div class="row2">
    <div class="col1b">
        <h4>Powerful Analytics</h4>
        <p>Actionable reports that go beyond opens and clicks. Track your email related conversions and sales.</p>
    </div><!-- /end #col1b -->
    <div class="col2b">
        <h4>Mark-up, Resell and Profit</h4>
        <p>White-label and rebrandable, you set the price your clients pay and we’ll send through your profit each month.</p>
    </div><!-- /end #col2b -->
    </div><!-- /end #row2 -->
</div>

And the CSS:

.content {
    width: 1024px;
    margin: auto;
    position: relative;
    margin-top: 20px;
    color: #333;
    background-color: #666;
}

.col1a {
    width: 225px;
    margin-right: 20px;
    display: block;
    float: left;
}

.col2a {
    width: 225px;
    margin-right: 20px;
    display: block;
    float: left;
}

.col1b {
    width: 225px;
    margin-right: 20px;
    display: block;
    float: left;
}

.col2b {
    width: 225px;
    margin-right: 20px;
    display: block;
    float: left;
}

.row1 {
    position: relative;
    width: 490px;
    background-color: orange;
}

.row2 {
    position: relative;
    width: 490px;
    background-color: green;
}

.content h4 {
    margin-top: 25px;
    margin-bottom: 7px;
    line-height: 22px;
    font-weight: normal;
    font-style: normal;
    font-size: 17px;
}

.content p {
    font-size: 13px;
    line-height: 18px;
}

I do not understand your question. What does "(…) the lower two paragraphs will both move down together." mean? — Simon
– Simon, Commented Dec 29, 2010 at 10:26
FYI: when you float a Div it become a "block" so you do not need to set it as display:block — Xtian
– Xtian, Commented Dec 29, 2010 at 16:14

Tatu Ulmanen · Accepted Answer · 2010-12-29 10:27:11Z

2

Add clear: both to the row elements.

Your element naming is quite redundant, col1a, col1b, col2a and col2b do the same thing so they can all be named simply as col. Same goes with row elements, which are borderline useless as well.

http://jsfiddle.net/yTJTp/1/

answered Dec 29, 2010 at 10:27

Tatu Ulmanen

125k34 gold badges190 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Text Columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related