CODEWITHSUNDEEP
htmlcss
Sui Go
Sui Go

Reputation: 463

How to make article and aside display the same horizontally with in a section

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.

enter image description here

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! :)

enter image description here

Upvotes: 2

Views: 14898

Answers (3)

snuffn
snuffn

Reputation: 2122

CSS

#usercontent
{
    border:1px solid black;
    width:598px;
}
#usercontent article
{
    height:100px;
    width:146px;
    float:left;
    border-color:black;
    border-style:solid;
    border-width:1px 1px 0 0;
}
#usercontent aside
{
    height:100px;
    width:450px;
    border-top:1px solid black;
    float:left;
}
.clearfix:after
{
    clear:both;
    content:'.';
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    visibility:hidden
}
.clearfix
{
    display:block;
    zoom:1
}​

HTML

<section id="usercontent" class="clearfix">
    <h1>Section - User Content</h1>
    <article>
        <h1>Article - Left Content</h1>
    </article>
    <aside>
        <h1>Aside - Right Content</h1>
    </aside>
</section>​​​​​​​​

DEMO

Upvotes: 1

Levi Hackwith
Levi Hackwith

Reputation: 9322

The CSS:

section#usercontent {
    border:1px solid black;
    width:600px;
}
.clear {
    clear: both;
    visibility: hidden;
}
section#usercontent article {
    height:100px;
    width:146px;
    float:left;
    border:1px solid black;
}
section#usercontent aside {
    height:100px;
    float: left;
    width:450px;
    border:1px solid black;
}​

The HTML:

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

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

    </aside>
<div class = "clear"></div>
</section>​​​​​​​​

I made them both float left, added a "clear" div and tweaked the width to accomodate the columns properly. Is this what you need?

Upvotes: 1

Boyye
Boyye

Reputation: 291

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.

Upvotes: 3

Related Questions