CODEWITHSUNDEEP
cssheightsidebar
Travis Moore
Travis Moore

Reputation: 49

How to set sidebar height to match main content height?

The issue is as the title states, after googling and looking through the posts here I am yet to find a solution that will work for me. As the side bar is within a fixed size design implementing a wrapper.

The CSS:

#container {
    width: 100%;
    float: left;
}

#content {
    padding: 0px 270px 20px 30px;
    background-image: url("../images/mainbg.jpg");
    border:1px solid #1a1a1a;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    box-shadow: 2px 2px 2px #000000;
}

#sideRight {
    float: right;
    width: 200px;
    margin-left: -250px;
    margin-right: 10px;
    padding: 2px 0px 30px 38px;
    background-image: url("../images/sidebarlight.png");
    background-repeat:repeat-y;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
}

JSFiddle: http://jsfiddle.net/6LTFH/

The website: http://www.debbie.travismoore.co.uk/

Any help is appreciated, Cheers

Upvotes: 0

Views: 2376

Answers (2)

Mihai Alex
Mihai Alex

Reputation: 678

Check the faux columns method http://alistapart.com/article/fauxcolumns I find it the best way to deal with such cases.

Upvotes: 1

SAiNT
SAiNT

Reputation: 26

there's no easy way out :) ...(except using css-tables)

next easiest solution was described here: Set column to full height of the page $('#Block').height($(document).height());

but if you want to get to the bottom of it, read these articles: http://tympanus.net/codrops/2013/07/17/troubleshooting-css/#article-width-height

http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/

good luck, and let's hope they release flexbox soon ;)

Upvotes: 0

Related Questions