CODEWITHSUNDEEP
htmlcss
vplusm
vplusm

Reputation: 59

Sidebar not positioning correctly

Basically, I don't understand why the isn't at the top right? It positions itself at the bottom, even though by my understanding it should be on the top right?

See JSfiddle for detailed code

http://jsfiddle.net/5JhMj/

#content section {
padding: 4%;
width: 70%;
float: left;
background-color: white;
margin-bottom:8%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;

}

aside {
width: 30%;
float: right;
background-color: green;

}

Upvotes: 0

Views: 69

Answers (2)

thpl
thpl

Reputation: 5910

You are floating your sidebar around your last section element.

Instead of this, wrap your sections around another container which you float. Then let your sidebar float aside that new container.

<div class="container">
    <div class="section-container">
        <section>...</section>
    </div>
    <aside>
        ...
    </aside>
</div>

CSS

.section-container{
    width: 70%;
    float: left;
}

aside {
    width: 29%;
    float: right;
    background-color: green;
}

Fiddle: http://jsfiddle.net/5JhMj/2/

Upvotes: 1

Surjith S M
Surjith S M

Reputation: 6740

Simple solution is put your aside before section

like

<div class="container">
<aside>
<h1>placeholder</h1>
</aside>
<section>
...
...

Working Fiddle

Upvotes: 1

Related Questions