Question

I have this code and I would like the paragraph that follows to be left aligned and below:

<div class="content_hdr clearfix">
    <div class="clearfix content_hdr_heading">System Test</div>
    <div class="content_hdr_intro">
    <p>
Some text
    </p></div>
</div>

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

div.content_hdr_heading {
    float: left;
    background: #ff9999;
}

I created this fiddle

Hope someone can help.

Answer 1

<div class="content_hdr">
    <div class="content_hdr_heading">System Test</div>
    <div class="content_hdr_intro">
        <p>Some text</p>
    </div>
</div>

.content_hdr_heading {
    float: left;
    background: #ff9999;
}

.content_hdr_intro {
    clear: left;
}

Since in this case there’s a clearing element after the float, it’s not necessary, but I usually put this on the containing element of floats to save headaches with following content:

.content_hdr {
    overflow: hidden;
}