Grow your CSS skills. Land your dream job.

My second column is going down!

  • # July 16, 2008 at 6:33 pm

    Here’s the page: http://stuckpixelstudio.com/clients/pay … ntact.html

    As you can see, the right column which has the contact form is going down, where I would like for it to be even with the left column.

    Here’s the HTML:

    Code:

    Contact

    Payne Industries, LLC
    8822 Cypress Woods Lane
    Olive Branch, MS 38654

    Tel: 800-123123
    662-895-6444

    Fax: 800-123123
    662-895-6610

    < ?php include("header.inc"); ?>






    Contact Us












    < ?php include("footer.inc"); ?>

    And here’s the CSS:

    Code:
    body {
    margin:0px; padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    }

    .header {
    background:url(images/header.jpg);
    width:1000px;
    height:200px;
    min-height:200px;
    margin: 0px;
    padding:0px;
    }

    .navbar {
    background:url(images/navbar.jpg) repeat-x;
    min-height:21px;
    height:21px;
    color:#ffffff;
    }

    .waterdrop {
    background:url(images/test.jpg);
    width:1000px;
    min-height:439px;
    height:439px;

    }

    .hometext {
    position:absolute;
    top:350px;
    left:400px;
    width:586px;
    font-size:22px;
    }

    .contactimage {
    background:url(images/contact.jpg);
    min-height:685px;
    height:685px;
    width:733px;
    color:#ffffff;
    }

    .contact {
    color:#ffffff;
    margin-left:100px;
    padding: 30px 0px 0px 0px;
    }

    h1 {display:inline;}

    .column1 { float:left; width:380px; margin-right:30px; margin-left:70px;}
    .column2 { float:right; width:380px;}

    #nav, #nav ul{
    margin:0px;
    padding:4px 0px 0px 0px;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    margin-right:10px;
    font-size:12px;
    text-transform:uppercase;

    }

    #nav a{
    display:block;
    padding:0px 5px;
    color:#fff;
    text-decoration:none;
    background-color:#b31212;
    }

    #nav a:hover{
    background-color:#fff;
    color:#333;
    }

    #nav li{
    float:left;
    position:relative;
    }

    #nav ul {
    position:absolute;
    display:none;
    width:12em;
    top:1.1em;
    }

    #nav li ul a{
    width:12em;
    height:auto;
    float:left;
    }

    #nav ul ul{
    top:auto;
    }

    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

    .content {
    background:#cccccc;
    width:500px;
    margin: 0px auto;
    padding: 10px;
    }

    Thanks.

    # July 16, 2008 at 7:02 pm

    Try reducing your column one width to around 250px; That should bring it back up.

    # July 16, 2008 at 7:18 pm

    Awesome! Thanks, that was it.

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

You must be logged in to reply to this topic.

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