css boxes stuck together...

Discussion in 'CSS' started by pinkmonkeylove, Oct 6, 2006.

  1. #1
    My CSS layout looks fine when veiwed in dreamweaver but when veiwed in firefox all the boxes i have glue themselves together...

    I should have a row of 3 boxes and a footer but no matter what i try i just cant do it...

    I'm very new at this, please please help?

    h1 {
    font-family: "Bradley Hand ITC";
    font-size: 24px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: capitalize;
    color: #000000;
    text-decoration: underline;
    }

    h2 {
    font-family: "Bradley Hand ITC";
    font-size: 20px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: capitalize;
    color: #000000;
    text-decoration: underline;
    }

    .smallboxgeneral {
    background-color: #FFFFFF;
    font:"Bradley Hand ITC";
    background-attachment: fixed;
    background-repeat: repeat;
    background-position: 100%;
    visibility: visible;
    height: auto;
    width: auto;
    text-align: left;
    word-spacing: normal;
    white-space: normal;
    text-indent: 5px;
    position: static;
    }

    .smallbox {
    background-color: #FFFFFF;
    font:"Bradley Hand ITC";
    background-attachment: fixed;
    background-repeat: repeat;
    background-position: 100%;
    visibility: visible;
    height: auto;
    width: 20%;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    float: left;
    text-align: left;
    word-spacing: normal;
    white-space: normal;
    margin-right: 20px;
    text-indent: 5px;
    position: static;
    }

    .smallboxmain {
    background-color: #FFFFFF;
    font:"Bradley Hand ITC";
    background-attachment: fixed;
    background-repeat: repeat;
    background-position: 100%;
    visibility: visible;
    height: auto;
    width: 50%;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    float: left;
    text-align: center;
    margin-right: 10px;
    position: static;
    }

    .smallboxright {
    background-color: #FFFFFF;
    font:"Bradley Hand ITC";
    background-attachment: fixed;
    background-repeat: repeat;
    background-position: 100%;
    visibility: visible;
    height: auto;
    width: 20%;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    float: right;
    text-align: right;
    text-indent: 5px;
    position: static;
    }

    .linkbar {
    background-color: #FFFFFF;
    font:"Bradley Hand ITC";
    background-attachment: fixed;
    background-repeat: repeat;
    background-position: 100%;
    visibility: visible;
    height: 30px;
    width: auto;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }

    .linkbarbottom {
    background-color: #FFFFFF;
    font:"Bradley Hand ITC";
    background-attachment: fixed;
    background-repeat: repeat;
    background-position: 100% bottom;
    visibility: visible;
    height: 30px;
    width: auto;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    position: static;
    }

    .header {
    background-image:url(images/Header.jpg);
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-position: left top;
    height: 95px;
    width: 460px;
    }

    body {
    font-family: "Bradley Hand ITC";
    background-attachment: fixed;
    background-color: #CCCCCC;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    }

    Thanks

    Pink
     
    pinkmonkeylove, Oct 6, 2006 IP
  2. lighe

    lighe Active Member

    Messages:
    150
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #2
    use margin-left instead of margin-right
     
    lighe, Oct 7, 2006 IP