Question

Here’s my html code

<section id="usercontent">
        <h1>Section - User Content</h1>
        <article>
        <h1>Article - Left Content</h1>

        </article>
        <aside>
        <h1>Aside - Right Content</h1>

        </aside>
    </section>

Here’s my css code

section#usercontent {
    border:1px solid black;
    width:598px;
}
section#usercontent article {
    height:100px;
    width:146px;
    float:left;
    border:1px solid black;
}
section#usercontent aside {
    height:100px;
    width:450px;
    border:1px solid black;
}

Here’s the output for the first css, but it is wrong because there is still space on the left side.

Here’s my second output, i just change my float:left; to float:right of section#usercontent article and it is almost correct but the article side was on the right side (must be on left) and the aside was on the left side (must be on right) i try also putting float on the section#usercontent aside but it just gotten worst and for the many times i tried this is the closest. Need any suggestions that can fix this issue thank you so much! 🙂

Answer 1

Have a look at this : http://jsfiddle.net/3m9fm/1/

I changed the width of your usercontent section to 600px. The width of that section wasn’t big enough for the article and the aside. Float the article left, the aside on the right and don’t forget to clear your floats with clear:both. (I’ve added that for you already in the jsfiddle). If your usercontent-width is fixed, make the article or aside a bit smaller.