HTMLHelp Forums > Making my "float" box fill all the way to bottom of page

Full Version: Making my "float" box fill all the way to bottom of page

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

SeanWoods

Apr 23 2009, 10:04 PM

If you look at my page: Index Page the gray box along the left side stops short of going all the way to the bottom of the page. I made this box a left floating box and the text on the right is in it's own right floating box. How do I make the height of the left box match the height of the right box so the gray goes all the way to the bottom?

CODE

#wrapper {
    width: 800px;
    text-align: left;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: none;
    background-color: #FFFFFF;
    border-right-width: 1px;
    border-right-color: #999999;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}
#navigation {
    height: 20px;
    text-align: center;
    margin-bottom: 15px;
}
#wrapper #bodyArea #left {
    width: 120px;
    float: left;
    background-color: #CCCCCC;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #999999;
    display: block;
    border-right-width: 1px;
    border-right-style: none;
    border-right-color: #999999;
    padding-top: 0px;
    padding-right: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    border-left-style: none;
}
#wrapper #bodyArea {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #999999;
    background-position: center;
    width: 799px;
    clear: both;
}

#wrapper #bodyArea #right {
    width: 679px;
    float: right;
    padding: 0px;
    border-top-width: 1px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #999999;
    text-align: justify;
    border-left-width: 1px;
    border-left-color: #999999;
    clear: right;
    margin-top: 0px;
}

#wrapper #bodyArea #footer {
    height: 55px;
    clear: both;
    background-color: #CCCCCC;
    border-right-style: none;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #999999;
    text-align: center;
    background-position: center;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #999999;
    border-left-style: none;
}

pandy

Apr 23 2009, 10:13 PM

See some solutions here.
http://css-discuss.incutio.com/?page=AnyColumnLongest

SeanWoods

Apr 28 2009, 07:45 PM

QUOTE(pandy @ Apr 23 2009, 10:13 PM)

See some solutions here.
http://css-discuss.incutio.com/?page=AnyColumnLongest

Thanks! Problem solved!

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.