Grow your CSS skills. Land your dream job.

Div box problem

  • # October 31, 2011 at 10:32 am

    I need help with a div block problem.

    I want it to look like this:
    Correct Layout

    But instead, it displays like this:
    How it appears

    Here is the HTML code:



    Upcoming City Holidays


    Christmas
    Sunday, Decemeber 25th


    Thanksgiving
    Wednesday, Decemeber 25th




    Annoucements



    New City Policy
    By: John Doe


    New City Policy
    By: John Doe


    New City Policy
    By: John Doe


    New City Policy
    By: John Doe


    New City Policy
    By: John Doe




    This is the Style Sheet:


    #holidays, #announcements {
    float: left;
    width: 200px;
    border: 1px solid #000;
    padding: 0px;
    text-align: center;
    margin-right: 5px;
    height: 150px;
    overflow: hidden;
    }
    #holidays h3, #announcements h3 {
    background-color: #006;
    display: block;
    color: #FFF;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 14px;
    margin-bottom: 20px;
    }
    #announcements {
    margin-right: 0px;
    text-align: left;
    width: 471px;
    }
    #announcements div {
    overflow: scroll;
    overflow-style: marquee-line;
    height: 100%;
    }
    #announcements h3 {
    margin-bottom: 0px;
    }
    #announcements h4 {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    font-size: 14px;
    }
    #announcements span {
    font-style: italic;
    font-weight: normal;
    font-size: 12px;
    }
    #holidays p {
    padding: 0px;
    font-size: 12px;
    margin-top: 0px;
    font-style: italic;
    }
    #holidays span {
    font-weight: bold;
    font-style: normal;
    }
    #Content {
    width: 680px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 5px;
    padding-top: 0px;
    background-image: url(../../layout/content_background.jpg);
    clear: both;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }

    # October 31, 2011 at 11:07 am

    #Content { overflow: hidden; }

    # October 31, 2011 at 12:38 pm

    Try adding this…

    …just above the closing tag of the “#Content” div.

    # October 31, 2011 at 1:52 pm

    why promote the use of extraneous divs? There are plenty of better ways to contain floats.

    # October 31, 2011 at 1:55 pm

    Looks like the overflow: hidden worked but why?

    The other problem I have now is the h3 tag is not flush to the containing div tag.
    h3 no flush

    # October 31, 2011 at 2:19 pm

    Never-mind, I figured it out. I needed to add a “marign-top: 0px” for the h3 tags. I believe it was because the box had no boundary to push against. Still curious why overflow: hidden worked though.

    # October 31, 2011 at 2:43 pm

    The overflow: hidden (or auto) is but one way to contain floats – its in the specs. It creates a new block formatting context, which will contain any floats. Another popular containment method is the clearfix method (some call it a hack, but its definitely not) which uses a pseudo class to add content after the float and clear it. This works similar to adding the extraneous div and clearing, but without the markup. There are other ways as well – no one way is perfect, so its best to know the various methods.

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".