Grow your CSS skills. Land your dream job.

[Solved] Equal heights problem!

  • # September 2, 2009 at 2:41 pm

    OK, here’s the deal. I got a design I have to use for this page I’m making, my first one actually. When I was converting my Mockup from PSD to (x)HTML and CSS with <div>’s I came over this "equal height – pain in the ass" thing. So I searched the net and asked some guys about it. All I could get out of them was this one article about the subject, and it told me all about this repeat-y 50% 0; thing within the CSS. I don’t know if any here have heard about it, but anyway, I couldn’t figure it. It says in the article that I should put in the "body" element, within the background:

    The problem is, my background in the body element goes repeat-x so I guess that’s way it not worked that way. Later on I was trying it within the <div>’s the whole problem came from. The background’s within these went repeat-y so I figured must do the trick, but no, not even that worked out the way it should. So now I’m stuck, feeling helpless. So please, anybody, help me out here!

    Here is my full code for the HTML and the CSS. Please try to figure this out for me. And show me where to put in the trick or tricks if that should be the case.

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor adipiscing facilisis. Donec odio nisi, elementum sed faucibus at, bibendum laoreet lacus. Donec ac dolor massa. Sed mollis, justo id hendrerit congue, turpis lectus vestibulum odio, faucibus dignissim enim libero eu velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum mollis, lectus interdum egestas porttitor, lectus erat commodo neque, aliquet consectetur dui libero non nunc. Vivamus vel lorem in tortor lacinia sodales. Nunc malesuada erat eget elit lobortis auctor vitae et sem. Pellentesque luctus, purus sed iaculis adipiscing, sapien velit dapibus justo, vitae malesuada dui justo a libero. Aliquam nec dui velit, eget sagittis nisi. Vestibulum accumsan nisl nibh, non dictum massa. Ut faucibus faucibus malesuada. Proin dictum neque in lorem euismod suscipit. Praesent blandit, elit a vulputate varius, ligula eros dictum turpis, ut pharetra lacus nunc in leo. Suspendisse ornare rutrum iaculis. Ut tempor congue vulputate. Quisque mollis auctor dapibus. Etiam viverra vulputate consectetur.

    Cras sed sem ante. Cras vehicula tellus et nunc consequat ornare. Quisque ultricies rhoncus euismod. Nulla sit amet tempus odio. Suspendisse non libero non mauris porttitor iaculis. Donec eros turpis, laoreet at adipiscing vitae, mollis nec sem. Nunc vitae felis ultrices tortor interdum iaculis eget eget magna. Cras in lacus ligula. Praesent semper congue sollicitudin. Quisque gravida justo quis leo aliquam eget dapibus ligula hendrerit. Maecenas semper augue eget dui ultrices at sagittis erat consequat. Integer tristique tempor nibh, a viverra dolor blandit id. Vestibulum non nunc nisi, non interdum massa. Nullam eu nulla a est aliquet dapibus a in elit. Pellentesque consectetur rutrum erat, faucibus faucibus ante laoreet at. Phasellus ut purus quis lacus ultricies ultricies nec sed quam. Duis venenatis scelerisque purus, eu tincidunt tellus sollicitudin quis. Sed at posuere sem. Phasellus non mollis lacus.

    Code:
    /*
    AUTHOR: O. Lund
    lund.ffk@gmail.com
    */

    /* RESET AND BASIC PAGE SETUP */
    * {
    margin: 0;
    padding: 0;
    }

    html {
    overflow: scroll;
    }

    body {
    font-size: 62.5%;
    font-family: Helvetica, sans-serif;
    background: #ffffff url(images/header-bg.jpg) repeat-x top;
    }

    ul {
    list-style: none inside;
    }

    p {
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 1.2em;
    }

    a {
    outline: none;
    }

    a img {
    border: none;
    }
    /* END RESET */

    /* TOOLBOX */
    .floatleft {
    float: left;
    }

    .floatright {
    float: right;
    }

    .clear {
    clear: both;
    }
    /* END TOOLBOX */

    /* STRUCTURE AND STUFF */
    #page-wrap {
    width: 800px;
    margin: 0 auto;
    }
    #header {
    background: url(images/header.jpg) no-repeat center;
    height: 249px;
    }
    ul#header-nav {
    list-style: none;
    padding-left: 250px;
    }
    ul#header-nav li a {
    display: block;
    font-size: 1.9em;
    float: left;
    color: #ffffff;
    text-decoration: none;
    margin-top: 200px;
    width: 90px;
    font-weight: bold;
    }
    ul#header-nav li a:hover {
    color: #ffed57;
    }
    #sidebar-left {
    background: url(images/sidebar-left-bg.jpg) repeat-y;
    width: 170px;
    float: left;
    }
    #main-content {
    background: url(images/main-content-bg.jpg) repeat-y
    width: 500px;
    float: left;
    }
    #sidebar-right {
    background: url(images/sidebar-right-bg.jpg) repeat-y;
    width: 130px;
    float: left;
    }

    #footer {
    clear: both;
    background: url(images/footer.jpg) no-repeat bottom center;
    min-height: 110px;
    text-align: center;
    }
    #footer-bg {
    background: #1d6184;
    position: bottom;
    margin-bottom: 30px;
    min-height: 80px;
    }
    #footer p {
    font-size: 1.0em;
    color: #ffffff;
    text-transform: uppercase;
    padding: 35px;
    }
    /* END STRUCTURE */

    # September 2, 2009 at 3:43 pm

    Just give me a link, brother

    # September 2, 2009 at 4:02 pm
    "soap" wrote:
    Just give me a link, brother

    Very well. Here you go! http://brisingrmz.webs.com/

    Thanks for looking into it! I really appreciate it.

    # September 2, 2009 at 4:12 pm

    are you trying to achieve this?
    http://www.communitymx.com/abstract.cfm?cid=BAD95

    # September 2, 2009 at 4:48 pm

    Thanks a lot, I read the article and tried it out with the .html to download and it all worked perfect. But I don’t figure out how to use it for my mark-up… I done just as it says, men it just don’t want to happen. Damn it. Could you try to fix it with my mark-up?

    # September 2, 2009 at 5:25 pm
    Code:
    /*
    AUTHOR: O. Lund
    lund.ffk@gmail.com
    */

    /* RESET AND BASIC PAGE SETUP */
    * {
    margin: 0;
    padding: 0;
    }

    html {
    overflow: scroll;
    height:100%;
    }

    body {
    font-size: 62.5%;
    font-family: Helvetica, sans-serif;
    background: #ffffff url(images/header-bg.jpg) repeat-x top;
    min-height:100%;
    }

    ul {
    list-style: none inside;
    }

    p {
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 1.2em;
    }

    a {
    outline: none;
    }

    a img {
    border: none;
    }
    /* END RESET */

    /* TOOLBOX */
    .floatleft {
    float: left;
    }

    .floatright {
    float: right;
    }

    .clear {
    clear: both;
    }
    /* END TOOLBOX */

    /* STRUCTURE AND STUFF */
    #page-wrap {
    overflow:hidden;
    height:100%;
    width: 800px;
    margin: 0 auto;
    }
    #header {
    background:url(images/header.jpg) no-repeat center;
    height: 249px;
    }
    ul#header-nav {
    list-style: none;
    padding-left: 250px;
    }
    ul#header-nav li a {
    display: block;
    font-size: 1.9em;
    float: left;
    color: #ffffff;
    text-decoration: none;
    margin-top: 200px;
    width: 90px;
    font-weight: bold;
    }
    ul#header-nav li a:hover {
    color: #ffed57;
    }

    #sidebar-left {
    background: url(images/sidebar-left-bg.jpg) repeat-y;
    width: 170px;
    float: left;
    height:100%;
    min-height:100%;
    margin-bottom:-5000px;
    padding-bottom:5000px;
    }
    #main-content {
    background: url(images/main-content-bg.jpg) repeat-y;
    width: 500px;
    float: left;
    height:100%;
    min-height:100%;
    margin-bottom:-5000px;
    padding-bottom:5000px;
    }
    #sidebar-right {
    background: url(images/sidebar-right-bg.jpg) repeat-y;
    width: 130px;
    float: left;
    height:100%;
    min-height:100%;
    margin-bottom:-5000px;
    padding-bottom:5000px;
    }

    #footer {
    clear: both;
    background: url(images/footer.jpg) no-repeat bottom center;
    min-height: 110px;
    text-align: center;
    }
    #footer-bg {
    background: #1d6184;
    position: bottom;
    margin-bottom: 30px;
    min-height: 80px;
    }
    #footer p {
    font-size: 1.0em;
    color: #ffffff;
    text-transform: uppercase;
    padding: 35px;
    }
    /* END STRUCTURE */

    # September 3, 2009 at 1:39 am

    Thank you so much! I don’t know what to say. This is a hole new world to me. 8-)

    Again, thanks!

    # September 3, 2009 at 3:08 pm

    good luck duder, keep on learning.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".