Grow your CSS skills. Land your dream job.

[SOLVED] Border-bottom now showing at the right place

  • # October 14, 2010 at 1:45 pm

    Hello. I’m making a website for some of my mates, but I have an amazingly annoying problem. The border-bottom I’m using is not showing at the bottom of the div, more like in the top 1/3. It’s the div class “post” that should have the border-bottom.

    The html-code for this is:

    			






    Dette er den første test


    Dette er den første test


    Skrevet af XXX den 6. okt. i Nyheder



    Lorem ipsum dolor sit amet, this is bold text consectetur adipiscing elit. This font is in italic cras lacinia pellentesque elit nec sodales. Etiam vehicula egestas interdum. Nulla facilisi. In at lectus odio, quis iaculis dui.


    Læs mere...







    And the CSS for this particular area:

    /*
    
    MAIN CONTENT
    */
    #main-content {
    width: 620px;
    background-color: #0a0a0a;
    border: none /*solid 1px #242424*/;
    padding: 1px;
    float: left;
    margin-top: 20px;
    }

    #main-content .container {
    width: auto;
    padding: 20px;
    /*background: url(images/gradient.png) repeat-x;
    border: none;*/
    }

    .post {
    display: block;
    position: relative;
    font-size: 100%;
    margin-bottom:25px;
    padding-bottom:5px;
    border-bottom: 1px solid #242424;
    }

    .post .thumbnail {
    float:left;
    margin-right:15px;
    margin-bottom:15px;
    width:200px;
    height:200px;
    }

    .post h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 21px;
    letter-spacing:normal;
    line-height: 17px;
    padding-bottom: 5px;
    }

    .post h2 a {
    color: #FFFFFF;
    text-decoration: none;
    }

    .post h2 a:hover {
    text-decoration: underline;
    }

    .post small {
    background-color:#8f008f;
    padding:3px;
    padding-left:8px;
    padding-right:8px;
    color:#fffffe;
    font-size:12px;
    }

    .post small a {
    color:#fffffe;
    text-decoration:none;
    }
    .post small a:hover {
    text-decoration:underline;
    color:#fffffe;
    }
    .post .summary {
    display:block;
    font-style: italic;
    margin-top:20px;
    float:left;
    width:360px;
    }

    .post p {
    padding-bottom:31px;
    }

    It’s probably quite simple, but all the help I could get i greatly appreciated.

    Thanks in advance,
    Kralle

    # October 14, 2010 at 2:43 pm

    can u post a link?

    # October 14, 2010 at 2:50 pm

    xxxxxxxxxxx

    It’s placed right under the “Skrevet af d. 6. okt……” It’s supposed to be beneath the “Læs mere…”-button.

    # October 14, 2010 at 3:16 pm

    im guessing its a clearing floats issue, put a

    right after that link and see if it works for you

    # October 14, 2010 at 4:37 pm

    add overflow: hidden; to .post { } to contain the floats

    # October 15, 2010 at 11:00 am

    or do what he said lol

    # October 15, 2010 at 9:12 pm

    Thanks a lot for your help, guys.

    I used wolfcry911’s advice and it works perfectly.

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

You must be logged in to reply to this topic.

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