Search code examples
htmlcsspositioningfootersidebar

How to make sidebar line up with footer?

I have a problem with my sidebar. The design I'm coding right now has the sidebar slightly overlapping the header of the site - intentionally. The problem however, is that I might use the wrong method to do it.

The sidebar is supposed to be lining up with the footer, but since i'm using:

#sidebar {
    width: 270px;
    position: relative;
    left: 690px;
    bottom: 125px;

If I don't use these lines the sidebar matches up, but I can't find any other way to do it.

There's another problem which shows up when Content gets added, the sidebar will automatically bring all the sidebar-content down with the main content, though the sidebar-frame will stay at the same spot.

I've included the page in codepen if you want to take a look at it.

http://codepen.io/anon/pen/BxpJa

Thank you for your help, Michael :)

Solution

  • Get rid of 

    position: relative;
left: 690px;
bottom: 125px;

    And add:

    float: right;
margin-top: -65px; /* adjust to your needs */

    Then clear the floated <aside> right before the closing parent </div> ... add:

    <br style="clear: right;" />

    Example

    This will be more consistent across browsers and the <aside> lines up with the <footer>