HTML5 Float/InlineBlock Example

For HTML5 capabilities presentation

by donabrams

HTML

<h1>Fun with floats</h1>
Good ref: <a href="http://www.ternstyle.us/blog/float-vs-inline-block">http://www.ternstyle.us/blog/float-vs-inline-block</a>
<h2>Normal (no floats)</h2>
    <section class="normal">
        <article>
            <p>Paragraph A</p>
        </article>
        <article>
            <p>Paragraph B</p>
        </article>
    </section>

<div class="clearfloat"></div>
<br/>

<section class="normal">
    <p>something</p>
    <article>
        <p>Paragraph A</p>
    </article>
    <article>
        <p>Paragraph B</p>
    </article>
    <p>After</p>
</section>

<div class="clearfloat"></div>
<br/>

<h2>After floating the articles</h2>
<h3>Display: block sections</h3>
    <section class="block">
        <article>
            <p>Paragraph A</p>
        </article>
        <article>
            <p>Paragraph B</p>
        </article>
    </section>


    <div class="clearfloat"></div>
    <br/>

    <section class="block">
        <article>
            <p>Paragraph A</p>
        </article>
        <article>
            <p>Paragraph B</p>
        </article>
        <!-- Nasty little div workaround -->
        <div class="clearfloat"></div>
    </section>

    <div class="clearfloat"></div>
    <br/>

    <section class="block">
        <p>something</p>
        <article>
            <p>Paragraph A</p>
        </article>
        <article>
            <p>Paragraph B</p>
        </article>
        <span>Before clearfloat</span>
        <p>Still before</p>
        <!-- Nasty little div workaround -->
        <div class="clearfloat"></div>
        <p>After</p>
    </section>

    <div class="clearfloat"></div>
    <br/>

    <section class="block">
        <article>
            <p>Paragraph A</p>
        </article>
        <article>
            <p>Paragraph B</p>
        </article>
    </section>
    <section class="block">
        <article>
            <p>Paragraph A</p>
        </article>
        <article>
            <p>Paragraph B</p>
        </article>
 ...

CSS

/* Just so you can see the boundaries */
section {
    border: 4px solid green;
}
article {
    border: 4px solid red;
}
/* The column HTML */
section {
    /* You can leave this as block and it will extend infinitely right unless you  */
    display: inline-block;
}
.block {
    display: block;
}
article {
    /* block by default */
    float: left;
}
/* Nasty, REQUIRED, workaround */
.clearfloat {
    clear:both;
}
/* Nasty, REQUIRED, workaround */
.fixed-width-children {
    /* 24px is 6* 4px borders */
    width:624px;
}
.fixed-width-children article {
    width:200px;
}
.normal {
    display:block;
}
.normal article {
    float:none;
}
h1, h2, h3 {
    font-weight: 700;
}
h1 {
    font-size: 30px;
}
h2 { 
    font-size: 25px;
}
h3 {
    font-size: 20px;
}