CODEWITHSUNDEEP
htmlcss
Caspert
Caspert

Reputation: 4363

Float sidebar always to the right

I just remember me something about float:left; and clear: right; to get the sidebar always to the right. But this is not working for me.

The problem you see on the picture, is that the sidebar is pushed to the bottom of the site by the pagination div.

My markup is:

<article></article>
<footer></footer >
<aside class="sidebar"></aside>

CSS:

aside {
   float:left;
   width: 300px;
   display:inline;
   margin: 0 10px; 
}

enter image description here

Upvotes: 0

Views: 1182

Answers (2)

Dennis Anderson
Dennis Anderson

Reputation: 1396

I would use the width percentage to use only float left and clear it in the footer like so:

article {
    width: 80%;
    height: 90%;
    background-color: yellow;
}
aside {
    width: 20%;
    height: 90%;
    background-color: blue;
}
footer {
    clear:both;
    width: 100%;
    height: 10%;
    background-color: red;
}

.left{
  float:left;
  }
<article class="left">ARTICLE</article>
<aside class="sidebar left">ASIDE</aside>
<footer>FOOTER</footer>

Upvotes: 0

Florin Pop
Florin Pop

Reputation: 5135

Put the article and footer in a div and add float:left to it and then you give the sidebar float:right like this:

<div class="left">
    <article></article>
    <footer></footer >
</div>

<aside class="sidebar"></aside>

CSS:

.left {
    float:left;
}

.sidebar {
    float:right;
}

Upvotes: 1

Related Questions