Reputation: 463
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! :)
Upvotes: 2
Views: 14898
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>
Upvotes: 1
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
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