CODEWITHSUNDEEP
css
Marilou S
Marilou S

Reputation: 105

How can I perform a clear of a DIV

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.

Upvotes: 0

Views: 71

Answers (3)

Šime Vidas
Šime Vidas

Reputation: 185933

Consider this:

HTML:

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

CSS:

div.content_hdr_heading {
    overflow:auto;    
}

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

Live demo: http://jsfiddle.net/simevidas/HmkMj/3/

Upvotes: 1

deceze
deceze

Reputation: 522081

<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;
}

Upvotes: 2

corymathews
corymathews

Reputation: 12619

p { clear:both; }

You do not need the clearfix you have there. That seems redundant. If its a heading tag using an h1,h2 etc.

Upvotes: 0

Related Questions