Grow your CSS skills. Land your dream job.

Box model error?

  • # July 31, 2009 at 2:45 pm

    Hello everyone!

    Well I’m working on a basic portfolio site/ web design site. I ran into a problem that I cant wrap my head around. For the content area I have created 3 simple div’s of different colors. The third box being a content area. I added a welcome statement along with a short paragraph <p>. Well I decided I wanted to move the word content to the right of that third box so that I can put a nice picture on the left side. Well I made a div class called contentindex { and floated it to the right and a width of 400px; . When I do this it kicks the content out and puts it underneath the box model I made. The box model shrinks as if there was no content inside.

    Here is the Code please let me know if you have any ideas. Thank you in advance for any help:

    XHTML Doc

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


    Welcome

    Hello and welcome to Fallout Designes. Home to the most unique and inspiring designs. We here at fallout Designs believe in the “awe” factor. We want to impress you and you clients by providing you a mind blowing experience with web design and fast hosting. Whether you need a re-vamp to your website or a website from scratch, we are here for your needs.



    CSS Doc:

    Code:
    body {
    background: #000000 url(../images/back_splash1.png) no-repeat 40% 0%;
    }

    #container1 {
    margin: auto;
    width: 700px;
    }

    #logo {
    float: left;
    margin-top: 100px;
    }

    /* NAVIGATION */

    .nav {
    float: right;
    margin-top: 115px;
    }

    .nav ul {
    margin-right: ;
    }

    .nav li {
    display: inline;
    padding-left: 5px;
    }

    .nav li a {
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    text-decoration: none;
    }

    .nav li a:hover {
    color: #143ea9;
    text-decoration: underline;
    }

    /* End Navigation and logo area — Start Content */

    /* Start Content Boxes */

    .box1 {
    background: #143ea9;
    clear: both;
    margin-top: 110px;
    padding: 3px;
    }

    .box2 {
    background: #418c1b;
    padding: 3px;
    }

    .box3 {
    background: #000000 url(../images/content_fill.png);
    padding: 3px;
    }

    /* End Boxes */

    .contentindex {
    border-left: #CCC 1px solid;
    float: right;
    width: 400px;

    }

    h1 {
    color: #ffffff;
    font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;
    margin: 0px;
    }

    p {
    color: #ffffff;
    font-family:”Palatino Linotype”, “Book Antiqua”, Palatino, serif;
    font-size: 13px;
    }

    Oh btw I added a <hr style="clear: both" /> tag at the end and it seems to carry the box and correct the error but it is just a work around until I can find the solution to the above listed problem. I would like to remove it.

    # July 31, 2009 at 2:51 pm

    If you could post a link that would be great! Makes things a million times easier for us!

    # July 31, 2009 at 3:01 pm

    Was just working on it locally but i have loaded it to the domain

    This is without the error and i added the hr for a work around
    http://www.falloutdesigns.com

    This is without the <hr> and you can see without what it does

    http://www.falloutdesigns.com/error

    thanks

    # July 31, 2009 at 3:23 pm

    Usually I would say add overflow: hidden to div.box1 which does the job, but doesn’t appear to be compatible with your fancy border clipping.

    So the simplest solution is to add an empty div where you currently have the <hr /> and make that clear: both.

    Code:

    Welcome

    Hello and welcome to Fallout Designes. Home to the most unique and inspiring designs. We here at fallout Designs believe in the “awe” factor. We want to impress you and you clients by providing you a mind blowing experience with web design and fast hosting. Whether you need a re-vamp to your website or a website from scratch, we are here for your needs.

    Code:
    .clear {
    clear: both;
    }
    # July 31, 2009 at 3:46 pm

    excellent thank you for the help everyone!

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

You must be logged in to reply to this topic.

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