Equal height columns using css

HTML & CSS
1

Hello Everyone

I’m trying to code a design that looks like this, it has a fixed with sidebar and a fluid/liquid main content area and I’m using JavaScript to make the sidebar and content area equal in height [URL=“http://www.nisei-1.demon.co.uk/rs/index.html”]as can be seen here.

The problem that I’m now facing is that if a add any columns to the content area with percentage based widths so that they expand and contract as the content area changes size the JavaScript breaks the design and also crashes IE8. Is it possible to recreate this design purely using css to create the equal height columns?

If I choose change to a fixed width design to solve the JavaScript issue what screen size should a be designing for 34% of users have a screen resolution of 1024x768 but 47% of visitors have a screen resolution of 1280x800 or higher. The reason a choose to have a fluid content area due to the nature of some of the tabular data that I need to display, it is to cramped, and difficult to read when using a width of 960px but a fluid layout would allow those width a larger screen to expand their browser and make the table more readable.

Any help would be much appreciated.

2

Hello Paul,

I’ve tried adding some columns to the content area and everything is working as I wanted it to. I’ll be having a good look at your code over the weekend to see how you achieved the results and hopefully finishing off the design.

Thanks for all your help.

3

Thanks Paul

This gives me an excellent foundation on which to build the design. Just one more question if I may, is it possible to put the content area before the sidebar in the html and then float the sidebar so that it appears on the left?

4

I wouldn’t use the javascript method as it its slows the page down and feels jerky when resizing.

5

Here’s a rough example using my method mentioned above.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100&#37;;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
#wrapper {
    min-width: 960px;
    max-width: 1200px;
    margin-top: 18px;
    margin-left: auto;
    margin-right: auto;
}
#branding {
    height: 126px;
}
#nav_wrapper {
    clear: both;
    height: 58px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 14px;
}
#sidebar {
    float: left;
    width: 200px;
    margin-left: 10px;
    position:relative;
    min-height:0;
    z-index:99;
    display:inline;
}
#content {
    margin-left: 250px;
    margin-right: 10px;
    margin-bottom: 18px;
    position:relative;
    min-height:0;
    z-index:99;
}
/*---FLUID GRID---*/
.half {
    width: 48%;
    display: inline;
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
    float: left;
}
.third {
    width: 31.333%;
    margin-left: 1%;
    margin-right: 1%;
    float: left;
}
#footer {
    clear: both;
}
.first {
    margin-left: 0;
}
.last {
    margin-right: 0;
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
body {
    background: #cce1eb url(http://www.nisei-1.demon.co.uk/rs/assets/bg.png) repeat-x;
}
/*logo*/
.logo {
    display: block;
    float: left;
    width:400px;
    height:120px;
    background: url(http://www.nisei-1.demon.co.uk/rs/assets/logo.png) no-repeat 0 0;
    margin: 0;
    top: 0;
    text-indent: -9999px
}
/*START SOCIAL LINKS*/
#social_links {
    width:170px;
    height:60px;
    position: relative;
    float: right;
    background: url(http://www.nisei-1.demon.co.uk/rs/assets/social_icons.png);
    margin: 0;
    padding: 0;
}
#social_links ul {
    margin: 0;
    top: 0;
}
#social_links li a {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    display: block;
    height: 60px;
    background: url(http://www.nisei-1.demon.co.uk/rs/assets/social_icons.png);
    text-indent: -9999px;
    overflow: hidden;
    font-size: 1%;
}
li#stumble a {
    left: 10px;
    width: 30px;
    background-position: -10px 0;
}
li#delicious a {
    left: 50px;
    width: 30px;
    background-position: -50px 0;
}
li#blinklist a {
    left: 90px;
    width: 30px;
    background-position: -90px 0;
}
li#facebook a {
    left: 130px;
    width: 30px;
    background-position: -130px 0;
}
/*END SOCIAL LINKS*/
/*START SEARH BAR*/


/*START MAIN NAVIGATION*/
#nav_wrapper {
    background: #d8dfe2 url(http://www.nisei-1.demon.co.uk/rs/assets/navbar_bg.png) repeat-x;
}
#nav_links {
    width:723px;
    height: 58px;
    position: relative;
    background: url(http://www.nisei-1.demon.co.uk/rs/assets/navbar_links.png);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}
#nav_links ul {
    margin: 0;
    top: 0;
}
#nav_links li {
    float: left;
}
#nav_links li a {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    display: block;
    height: 58px;
    background: url(http://www.nisei-1.demon.co.uk/rs/assets/navbar_links.png);
    text-indent: -9999px;
    overflow: hidden;
    font-size: 1%;
}
li#nav_home a {
    left: 3px;
    width:58px;
    background-position: -3px 0;
}
li#nav_heaton a {
    left: 61px;
    width: 69px;
    background-position: -61px 0;
}
li#nav_rustonjames a {
    left: 130px;
    width: 130px;
    background-position: -130px 0;
}
li#nav_rushtonspencer a {
    left: 260px;
    width: 143px;
    background-position: -260px 0;
}
li#nav_parish a {
    left: 403px;
    width: 126px;
    background-position: -403px 0;
}
li#nav_transcriptions a {
    left: 529px;
    width: 123px;
    background-position: -529px 0;
}
li#nav_gallery a {
    left: 652px;
    width: 69px;
    background-position: -652px 0;
}
li#nav_home a:hover {
    background-position: -3px -58px;
}
li#nav_heaton a:hover {
    background-position: -61px -58px;
}
li#nav_rustonjames a:hover {
    background-position: -130px -58px;
}
li#nav_rushtonspencer a:hover {
    background-position: -260px -58px;
}
li#nav_parish a:hover {
    background-position: -403px -58px;
}
li#nav_transcriptions a:hover {
    background-position: -529px -58px;
}
li#nav_gallery a:hover {
    background-position: -652px -58px;
}
/*END MAIN NAVIGATION*/

.strap {
    display: block;
    width:664px;
    margin-top: 0;
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 18px;
    top: 0;
    bottom: 0;
}
#sidebar {
    min-height: 324px;
    padding-left: 10px;
    padding-right: 10px;
}
.parish_ribbon {
    display: block;
    width: 230px;
    height: 72px;
    margin-left: -20px;
    text-indent: -9999px;
    background: url(http://www.nisei-1.demon.co.uk/rs/assets/parish_records.png) no-repeat 0 0;
}
#sidebar ul {
    font-family: Trebuchet, Tahoma, Arial, sans-serif;
}
#content {
    padding-left: 10px;
    padding-right: 10px;
}
.rounded, #l, #r {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
 behavior: url (PIE.htc);
}
#footer p {
    padding-left: 80px;
    padding-right: 80px;
    text-align: center;
    color: #648393;
}
body {
    font-family: Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif;
    color: #6b757a;
    font-size: 75%;
    line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
    position: relative;
    font-family: Trebuchet, Tahoma, Arial, sans-serif;
    color: #648393;
}
h1, h2 {
    line-height: 36px;
    margin-bottom: 18px;
}
h1, h2, h3, h4 {
    margin-top: 18px;
}
h3, h4, h5, h6 {
    line-height: 18px;
}
h1 {
    font-size: 36px;
    top: 5px;
}
h2 {
    font-size: 28px;
    top: 8px;
}
h3 {
    font-size: 22px;
    top: 1px;
}
h4 {
    font-size: 18px;
    top: 2px;
}
h5 {
    font-size: 15px;
    top: 4px;
}
h6 {
    font-size: 13px;
    top: 5px;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child {
    margin-top: 0;
}
p, pre, address {
    font-size: 13px;
    line-height: 18px;
    position: relative;
    text-align: justify;
    top: 5px;
    margin-bottom: 18px;
}
abbr, code, kbd, samp, small, var {
    line-height: 15px;
}
ul, ol, dl, dialog {
    font-size: 13px;
    line-height: 18px;
    position: relative;
    top: 5px;
    margin-top: 18px;
    margin-bottom: 18px;
}
li ul, li ol, ul ul, ol ol {
    top: 0;
    margin-top: 0;
    margin-bottom: 0;
}
ul ul {
    padding-left: 10px;
}
li h1, li h2, li h3, li h4, li h5, li h6, li p {
    top: 0;
}
form, legend, label {
    font-size: 13px;
    line-height: 18px;
}
legend {
    position: relative;
    top: 5px;
}
input, textarea {
    font-size: 12px;
}
table {
    font-size: 13px;
}
caption {
    font-size: 13px;
    line-height: 18px;
    position: relative;
}
#footer {
    font-size: 11px;
    line-height: 18px;
}
hr {
    position: relative;
    height: 4px;
    margin: 18px 0 14px 0;
}
/* equal columns code */
#main {
    width:100%;
    position:relative;
    overflow:hidden;
}
/*left column background*/
#l {
    background: #d4e1e7 url(http://www.nisei-1.demon.co.uk/rs/assets/st_lawrence.png) bottom no-repeat;
    border: #adbec6 1px solid;
    width:220px;
    position:absolute;
    left:10px;
    top:0;
    bottom:0;
}
* html #l {
    top:auto;
    height:9999em;
    border-top:1px solid #adbec6
}/* ie6 fix*/
/*right column background*/
#r {
    position:absolute;
    left:252px;
    right:10px;
    top:0;
    bottom:0;
    background: #d4e1e7 url(http://www.nisei-1.demon.co.uk/rs/assets/content_bg.png) bottom repeat-x;
    border: #adbec6 1px solid;
}
* html #r {
    top:auto;
    height:9999em;
}/* ie6 fix*/
* html #content {
    height:1%;
    border-top:1px solid #adbec6
}/* ie6 fix*/
#r p {margin:0}
* html #r p {height:1px}
</style>
</head>
<body>
<div id="wrapper">
    <!--START BRANDING (LOGO, SOCIAL MEDIA LINKS, SEARCH BOX-->
    <div id="branding">
        <h2 class="logo">Rushton Spencer. Local &amp; family history</h2>
        <ul id="social_links">
            <li id="stumble"><a href="#" title="Stumble this page">Stumble</a></li>
            <li id="delicious"><a href="#" title="Bookmark on del.icio.us">Del.icio.us</a></li>
            <li id="blinklist"><a href="#" title="Blink this page">Blinklist</a></li>
            <li id="facebook"><a href="#" title="Share this on Facebook">Facebook</a></li>
        </ul>
        <!--END BRANDING-->
    </div>
    <!--START MAIN NAVIGATION-->
    <div id="nav_wrapper"><img src="http://www.nisei-1.demon.co.uk/rs/assets/navbar_left.png" class="left" alt="navbar left side"> <img src="http://www.nisei-1.demon.co.uk/rs/assets/navbar_right.png" class="right" alt="navbar right side">
        <div id="nav_links">
            <ul>
                <li id="nav_home"><a href="#">Home</a></li>
                <li id="nav_heaton"><a href="#">Heaton</a></li>
                <li id="nav_rustonjames"><a href="#">Rushton James</a></li>
                <li id="nav_rushtonspencer"><a href="#">Rushton Spencer</a></li>
                <li id="nav_parish"><a href="#">Parish Records</a></li>
                <li id="nav_transcriptions"><a href="#">Transcriptions</a></li>
                <li id="nav_gallery"><a href="#">Gallery</a></li>
            </ul>
        </div>
    </div>
    <!--END NAVIGATION-->
    <div id="main">
        <!--START CONTENT AREA-->
        <!--START SIDEBAR-->
        <div id="sidebar">
            <h3>Parish Records</h3>
            <ul id="menu" class="menu collapsible">
                <li><a href="#">Baptisms</a></li>
                <li><a href="#">Burials</a></li>
                <li><a href="#">Marriages</a></li>
                <li><a href="#">Memorial Inscriptions</a>
                    <ul>
                        <li><a href="#">Allcock&ndash;Dawson</a></li>
                        <li><a href="#">Fletcher&ndash;Johnson</a></li>
                        <li><a href="#">Kent&ndash;Oakes</a></li>
                        <li><a href="#">Plant&ndash;Wright</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--END SIDEBAR-->
        <!--START MAIN CONTENT-->
        <div id="content">
            <h1>Content area</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel leo lacus,
                auctor faucibus lacus. Duis a lacus nisi. Nunc at dolor odio. In velit risus,
                venenatis et fringilla nec, rutrum sed sapien. Nullam fermentum lobortis ultrices.
                Suspendisse tempor sodales mi eget tempus. Nam non ultrices neque. Duis facilisis
                eros elit, sollicitudin placerat nisl. Nullam rutrum justo eu odio gravida
                tincidunt convallis nulla dapibus. Integer euismod consectetur luctus. Cum
                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                mus. Proin faucibus ante ut elit porta mattis. In hac habitasse platea dictumst.
                Integer tellus nibh, porttitor sed sollicitudin non, consequat et urna. Nunc
                vestibulum sodales mi, et adipiscing odio consequat eu. Duis malesuada, tortor
                non consequat vestibulum, sapien dui semper nisl, in tincidunt libero orci
                vel orci. Mauris et porttitor lacus. Phasellus metus tortor, tempus at suscipit
                sed, tempus ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus
                et ultrices posuere cubilia Curae; Morbi non leo arcu. </p>
            <h2>Content area</h2>
            <p>Nullam consequat, magna et semper tincidunt, dolor risus pulvinar mi, id
                auctor magna mauris et sem. Nulla facilisi. Donec egestas interdum justo at
                laoreet. Phasellus congue bibendum suscipit. Nunc malesuada commodo orci ut
                interdum. Mauris ante nisl, malesuada vel tempus eu, volutpat et magna. In
                hac habitasse platea dictumst. Duis placerat odio sed orci posuere condimentum
                posuere nisl vulputate. Proin suscipit quam pellentesque eros tempus vitae
                imperdiet mauris dictum. In elementum, tellus nec pellentesque malesuada,
                nisl est pharetra neque, ac semper orci lacus eu ligula. Ut condimentum varius
                accumsan. Morbi ac dui ante.</p>
            <p>Sed lectus lorem, tempus non posuere ac, porttitor id tellus. Praesent at
                massa nisi. Sed quis pulvinar diam. Nam tortor nulla, rhoncus lobortis tincidunt
                nec, fringilla ac arcu. Maecenas eget libero lacus, eu scelerisque justo.
                Nullam quis eros nunc, eget laoreet augue. Quisque eget sem quis orci pretium
                rhoncus. Etiam a metus non risus pretium pellentesque. Donec dapibus risus
                sit amet lacus consectetur sodales. Maecenas tempor pellentesque ligula id
                tempus.</p>
            <h3>Content area</h3>
            <p>Sed in arcu id metus egestas fringilla. Aliquam erat volutpat. Morbi blandit,
                leo at dictum sodales, libero turpis egestas arcu, nec consectetur diam arcu
                eu eros. Cras luctus tincidunt mauris. Ut placerat mollis erat nec facilisis.
                Vivamus gravida nisi a risus cursus in volutpat nisl mollis. Class aptent
                taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                Duis ut massa eros, eget blandit justo. Vestibulum congue aliquet tortor a
                ultrices. Sed et felis eget elit dictum viverra vel non orci. Aenean mollis
                tincidunt venenatis. Aliquam eleifend neque nec tellus congue in gravida purus
                mattis. Sed ipsum tellus, consequat hendrerit sollicitudin non, tempus id
                felis. Nam at nisi ac justo ultrices suscipit.</p>
        </div>
        <!--END MAIN CONTENT-->
        <div id="l"></div>
        <div id="r">
            <p></p>
        </div>
    </div>
    <!-- end main -->
    <!--START FOOTER-->
    <div id="footer">
        <P>Website copyright &copy; 2006&ndash; Martin Ruston<br>
            Copyrights to all of the resources on this website are retained by
            the individual rights holders. The information is provided for personal research
            purposes only and should not be copied or used for any other purpose without
            the prior consent of the relevant copyright holders.</P>
    </div>
    <!--END FOOTER-->
    <!--END CONTENT AREA-->
</div>
</body>
</html>

Just copy and paste and run it while online to see the effect as all urls have been made absolute for testing.

6

Yes it can be done if you use the method from here.

Or you could probably do it with the “faux column approach” using an image for the equal columns. It’s a little tricky with percentage width columns though.

7

McBob: look up ‘faux columns’ on google. That will show you articles about fixing the 2 column layout.

About the resolution: Always go for as much percentage as possible. If you choose the 1024 resolution the 1280 people will ‘also’ be able to experience your site. Do it the opposite way however and only 47% of the people will experience your site.

8

Hi,

It’s a little tricky because only one of the columns is floated but it can be done with some negative margins and an inner elements like so.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100&#37;;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
#wrapper {
    min-width: 960px;
    max-width: 1200px;
    margin-top: 18px;
    margin-left: auto;
    margin-right: auto;
}
#branding {
    height: 126px;
}
#nav_wrapper {
    clear: both;
    height: 58px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 14px;
}
#sidebar {
    float: left;
    width: 200px;
    margin-left: 10px;
    position:relative;
    min-height:0;
    z-index:99;
    display:inline;
}
#content {
    margin-bottom: 18px;
    position:relative;
    min-height:0;
    z-index:99;
}
/*---FLUID GRID---*/
.half {
    width: 48%;
    display: inline;
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
    float: left;
}
.third {
    width: 31.333%;
    margin-left: 1%;
    margin-right: 1%;
    float: left;
}
#footer {
    clear: both;
}
.first {
    margin-left: 0;
}
.last {
    margin-right: 0;
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
body {
    background: #cce1eb url(http://www.nisei-1.demon.co.uk/rs/assets/bg.png) repeat-x;
}
/*logo*/
.logo {
    display: block;
    float: left;
    width:400px;
    height:120px;
    background: url(http://www.nisei-1.demon.co.uk/rs/assets/logo.png) no-repeat 0 0;
    margin: 0;
    top: 0;
    text-indent: -9999px
}
/*START SOCIAL LINKS*/
#social_links {
    width:170px;
    height:60px;
    position: relative;
    float: right;
    background: url(http://www.nisei-1.demon.co.uk/rs/assets/social_icons.png);
    margin: 0;
    padding: 0;
}
#social_links ul {
    margin: 0;
    top: 0;
}
#social_links li a {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    display: block;
    height: 60px;
    background: url(http://www.nisei-1.demon.co.uk/rs/assets/social_icons.png);
    text-indent: -9999px;
    overflow: hidden;
    font-size: 1%;
}
li#stumble a {
    left: 10px;
    width: 30px;
    background-position: -10px 0;
}
li#delicious a {
    left: 50px;
    width: 30px;
    background-position: -50px 0;
}
li#blinklist a {
    left: 90px;
    width: 30px;
    background-position: -90px 0;
}
li#facebook a {
    left: 130px;
    width: 30px;
    background-position: -130px 0;
}
/*END SOCIAL LINKS*/
/*START SEARH BAR*/


/*START MAIN NAVIGATION*/
#nav_wrapper {
    background: #d8dfe2 url(http://www.nisei-1.demon.co.uk/rs/assets/navbar_bg.png) repeat-x;
}
#nav_links {
    width:723px;
    height: 58px;
    position: relative;
    background: url(http://www.nisei-1.demon.co.uk/rs/assets/navbar_links.png);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}
#nav_links ul {
    margin: 0;
    top: 0;
}
#nav_links li {
    float: left;
}
#nav_links li a {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    display: block;
    height: 58px;
    background: url(http://www.nisei-1.demon.co.uk/rs/assets/navbar_links.png);
    text-indent: -9999px;
    overflow: hidden;
    font-size: 1%;
}
li#nav_home a {
    left: 3px;
    width:58px;
    background-position: -3px 0;
}
li#nav_heaton a {
    left: 61px;
    width: 69px;
    background-position: -61px 0;
}
li#nav_rustonjames a {
    left: 130px;
    width: 130px;
    background-position: -130px 0;
}
li#nav_rushtonspencer a {
    left: 260px;
    width: 143px;
    background-position: -260px 0;
}
li#nav_parish a {
    left: 403px;
    width: 126px;
    background-position: -403px 0;
}
li#nav_transcriptions a {
    left: 529px;
    width: 123px;
    background-position: -529px 0;
}
li#nav_gallery a {
    left: 652px;
    width: 69px;
    background-position: -652px 0;
}
li#nav_home a:hover {
    background-position: -3px -58px;
}
li#nav_heaton a:hover {
    background-position: -61px -58px;
}
li#nav_rustonjames a:hover {
    background-position: -130px -58px;
}
li#nav_rushtonspencer a:hover {
    background-position: -260px -58px;
}
li#nav_parish a:hover {
    background-position: -403px -58px;
}
li#nav_transcriptions a:hover {
    background-position: -529px -58px;
}
li#nav_gallery a:hover {
    background-position: -652px -58px;
}
/*END MAIN NAVIGATION*/

.strap {
    display: block;
    width:664px;
    margin-top: 0;
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 18px;
    top: 0;
    bottom: 0;
}
#sidebar {
    min-height: 324px;
    padding-left: 10px;
    padding-right: 10px;
}
.parish_ribbon {
    display: block;
    width: 230px;
    height: 72px;
    margin-left: -20px;
    text-indent: -9999px;
    background: url(http://www.nisei-1.demon.co.uk/rs/assets/parish_records.png) no-repeat 0 0;
}
#sidebar ul {
    font-family: Trebuchet, Tahoma, Arial, sans-serif;
}
#content {
    padding-left: 10px;
    padding-right: 10px;
}
.rounded, #l, #r {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
 behavior: url (PIE.htc);
}
#footer p {
    padding-left: 80px;
    padding-right: 80px;
    text-align: center;
    color: #648393;
}
body {
    font-family: Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif;
    color: #6b757a;
    font-size: 75%;
    line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
    position: relative;
    font-family: Trebuchet, Tahoma, Arial, sans-serif;
    color: #648393;
}
h1, h2 {
    line-height: 36px;
    margin-bottom: 18px;
}
h1, h2, h3, h4 {
    margin-top: 18px;
}
h3, h4, h5, h6 {
    line-height: 18px;
}
h1 {
    font-size: 36px;
    top: 5px;
}
h2 {
    font-size: 28px;
    top: 8px;
}
h3 {
    font-size: 22px;
    top: 1px;
}
h4 {
    font-size: 18px;
    top: 2px;
}
h5 {
    font-size: 15px;
    top: 4px;
}
h6 {
    font-size: 13px;
    top: 5px;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child {
    margin-top: 0;
}
p, pre, address {
    font-size: 13px;
    line-height: 18px;
    position: relative;
    text-align: justify;
    top: 5px;
    margin-bottom: 18px;
}
abbr, code, kbd, samp, small, var {
    line-height: 15px;
}
ul, ol, dl, dialog {
    font-size: 13px;
    line-height: 18px;
    position: relative;
    top: 5px;
    margin-top: 18px;
    margin-bottom: 18px;
}
li ul, li ol, ul ul, ol ol {
    top: 0;
    margin-top: 0;
    margin-bottom: 0;
}
ul ul {
    padding-left: 10px;
}
li h1, li h2, li h3, li h4, li h5, li h6, li p {
    top: 0;
}
form, legend, label {
    font-size: 13px;
    line-height: 18px;
}
legend {
    position: relative;
    top: 5px;
}
input, textarea {
    font-size: 12px;
}
table {
    font-size: 13px;
}
caption {
    font-size: 13px;
    line-height: 18px;
    position: relative;
}
#footer {
    font-size: 11px;
    line-height: 18px;
}
hr {
    position: relative;
    height: 4px;
    margin: 18px 0 14px 0;
}
/* equal columns code */
#main {
    width:100%;
    position:relative;
    overflow:hidden;
}
/*left column background*/
#l {
    background: #d4e1e7 url(http://www.nisei-1.demon.co.uk/rs/assets/st_lawrence.png) bottom no-repeat;
    border: #adbec6 1px solid;
    width:220px;
    position:absolute;
    left:10px;
    top:0;
    bottom:0;
}
* html #l {
    top:auto;
    height:9999em;
    border-top:1px solid #adbec6
}/* ie6 fix*/
/*right column background*/
#r {
    position:absolute;
    left:252px;
    right:10px;
    top:0;
    bottom:0;
    background: #d4e1e7 url(http://www.nisei-1.demon.co.uk/rs/assets/content_bg.png) bottom repeat-x;
    border: #adbec6 1px solid;
}
* html #r {
    top:auto;
    height:9999em;
}/* ie6 fix*/
* html #content {
    height:1%;
    border-top:1px solid #adbec6
}/* ie6 fix*/
#r p {margin:0}
* html #r p {height:1px}


#content{
    float:right;
    width:100%;
    margin-left:-280px;
}
.inner{margin-left:280px;margin-right:20px}

</style>
</head>
<body>
<div id="wrapper">
    <!--START BRANDING (LOGO, SOCIAL MEDIA LINKS, SEARCH BOX-->
    <div id="branding">
        <h2 class="logo">Rushton Spencer. Local &amp; family history</h2>
        <ul id="social_links">
            <li id="stumble"><a href="#" title="Stumble this page">Stumble</a></li>
            <li id="delicious"><a href="#" title="Bookmark on del.icio.us">Del.icio.us</a></li>
            <li id="blinklist"><a href="#" title="Blink this page">Blinklist</a></li>
            <li id="facebook"><a href="#" title="Share this on Facebook">Facebook</a></li>
        </ul>
        <!--END BRANDING-->
    </div>
    <!--START MAIN NAVIGATION-->
    <div id="nav_wrapper"><img src="http://www.nisei-1.demon.co.uk/rs/assets/navbar_left.png" class="left" alt="navbar left side"> <img src="http://www.nisei-1.demon.co.uk/rs/assets/navbar_right.png" class="right" alt="navbar right side">
        <div id="nav_links">
            <ul>
                <li id="nav_home"><a href="#">Home</a></li>
                <li id="nav_heaton"><a href="#">Heaton</a></li>
                <li id="nav_rustonjames"><a href="#">Rushton James</a></li>
                <li id="nav_rushtonspencer"><a href="#">Rushton Spencer</a></li>
                <li id="nav_parish"><a href="#">Parish Records</a></li>
                <li id="nav_transcriptions"><a href="#">Transcriptions</a></li>
                <li id="nav_gallery"><a href="#">Gallery</a></li>
            </ul>
        </div>
    </div>
    <!--END NAVIGATION-->
    <div id="main">
        <!--START CONTENT AREA-->
        
        <!--START MAIN CONTENT-->
        <div id="content">
        <div class="inner">
            <h1>Content area</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel leo lacus,
                auctor faucibus lacus. Duis a lacus nisi. Nunc at dolor odio. In velit risus,
                venenatis et fringilla nec, rutrum sed sapien. Nullam fermentum lobortis ultrices.
                Suspendisse tempor sodales mi eget tempus. Nam non ultrices neque. Duis facilisis
                eros elit, sollicitudin placerat nisl. Nullam rutrum justo eu odio gravida
                tincidunt convallis nulla dapibus. Integer euismod consectetur luctus. Cum
                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                mus. Proin faucibus ante ut elit porta mattis. In hac habitasse platea dictumst.
                Integer tellus nibh, porttitor sed sollicitudin non, consequat et urna. Nunc
                vestibulum sodales mi, et adipiscing odio consequat eu. Duis malesuada, tortor
                non consequat vestibulum, sapien dui semper nisl, in tincidunt libero orci
                vel orci. Mauris et porttitor lacus. Phasellus metus tortor, tempus at suscipit
                sed, tempus ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus
                et ultrices posuere cubilia Curae; Morbi non leo arcu. </p>
            <h2>Content area</h2>
            <p>Nullam consequat, magna et semper tincidunt, dolor risus pulvinar mi, id
                auctor magna mauris et sem. Nulla facilisi. Donec egestas interdum justo at
                laoreet. Phasellus congue bibendum suscipit. Nunc malesuada commodo orci ut
                interdum. Mauris ante nisl, malesuada vel tempus eu, volutpat et magna. In
                hac habitasse platea dictumst. Duis placerat odio sed orci posuere condimentum
                posuere nisl vulputate. Proin suscipit quam pellentesque eros tempus vitae
                imperdiet mauris dictum. In elementum, tellus nec pellentesque malesuada,
                nisl est pharetra neque, ac semper orci lacus eu ligula. Ut condimentum varius
                accumsan. Morbi ac dui ante.</p>
            <p>Sed lectus lorem, tempus non posuere ac, porttitor id tellus. Praesent at
                massa nisi. Sed quis pulvinar diam. Nam tortor nulla, rhoncus lobortis tincidunt
                nec, fringilla ac arcu. Maecenas eget libero lacus, eu scelerisque justo.
                Nullam quis eros nunc, eget laoreet augue. Quisque eget sem quis orci pretium
                rhoncus. Etiam a metus non risus pretium pellentesque. Donec dapibus risus
                sit amet lacus consectetur sodales. Maecenas tempor pellentesque ligula id
                tempus.</p>
            <h3>Content area</h3>
            <p>Sed in arcu id metus egestas fringilla. Aliquam erat volutpat. Morbi blandit,
                leo at dictum sodales, libero turpis egestas arcu, nec consectetur diam arcu
                eu eros. Cras luctus tincidunt mauris. Ut placerat mollis erat nec facilisis.
                Vivamus gravida nisi a risus cursus in volutpat nisl mollis. Class aptent
                taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                Duis ut massa eros, eget blandit justo. Vestibulum congue aliquet tortor a
                ultrices. Sed et felis eget elit dictum viverra vel non orci. Aenean mollis
                tincidunt venenatis. Aliquam eleifend neque nec tellus congue in gravida purus
                mattis. Sed ipsum tellus, consequat hendrerit sollicitudin non, tempus id
                felis. Nam at nisi ac justo ultrices suscipit.</p>
        </div></div>
        <!--END MAIN CONTENT-->
        <!--START SIDEBAR-->
        <div id="sidebar">
            <h3>Parish Records</h3>
            <ul id="menu" class="menu collapsible">
                <li><a href="#">Baptisms</a></li>
                <li><a href="#">Burials</a></li>
                <li><a href="#">Marriages</a></li>
                <li><a href="#">Memorial Inscriptions</a>
                    <ul>
                        <li><a href="#">Allcock&ndash;Dawson</a></li>
                        <li><a href="#">Fletcher&ndash;Johnson</a></li>
                        <li><a href="#">Kent&ndash;Oakes</a></li>
                        <li><a href="#">Plant&ndash;Wright</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--END SIDEBAR-->
        <div id="l"></div>
        <div id="r"><p></p></div>
    </div>
    <!-- end main -->
    <!--START FOOTER-->
    <div id="footer">
        <P>Website copyright &copy; 2006&ndash; Martin Ruston<br>
            Copyrights to all of the resources on this website are retained by
            the individual rights holders. The information is provided for personal research
            purposes only and should not be copied or used for any other purpose without
            the prior consent of the relevant copyright holders.</P>
    </div>
    <!--END FOOTER-->
    <!--END CONTENT AREA-->
</div>
</body>
</html>
9

Sorry to hear that. Have you tried one of the jQuery rounded corner solutions?

10

There are several CSS ways for doing so. you said that your sidebar has a fixed hide!

What you could do is add overflow: hidden to the wrapper

and add a high value padding-bottom to the content div and the same negative margin-bottom value i.e.



#wrapper {
    /* whatever other values you have */  overflow: hidden;
}

#content {
      /* whatever other values you have */ padding-bottom: 2000px; margin-bottom: - 2000px;

}

Hope this works for you

11

That IE8 problem sounds odd. Do you have a page that demonstrates that behavior?

Off Topic:

Thread moved to CSS forum.

12

I tried using a couple of the jQuery rounded corner solutions but experienced problems when the browser was resized, so I chose to use css3 and PIE.htc for IE (if I can get it to work).

I’ve been googling and found that you can overcome the problem of the disappearing border at the bottom of the columns by inserting a couple of extra divs and using a background image. This should work fine for the side bar where the image of the church needs to be clear of the content, but in the main content area the background image needs to appear under the content apart from the last 18px.

I’ll give it a try and see what happens.

13

Thanks for the reply

I’ve tried that method, but unfortunately it means that I lost the background and the 1px border and rounded corners image at the bottom of the sidebar and content area.