2 Replies Latest reply on May 9, 2010 5:35 PM by izycrzy

    Column alignment is off

    Szaint

      My page has a right column and a left column. Both have a 10 px top margin in the CSS but the right column sits lower for some reason. The right column is in a "column container" because there is a another div element below it which is named "bottomright_column". Any ideas why the alignment is off? I'm including the link and the CSS. Thanks.

       

      http://www.jgraveslawyers.com/

       

       

      body {

      font-family: Arial, Helvetica, sans-serif;

      font-size: 1em;

      color: #000;

      }

      /* CSS Document */

       

      #container {

      width: 960px;

      background: #FFFFFF;

      margin: 0 auto;

      padding-top: 10px;

      padding-left: 10px;

      padding-right: 10px;

      overflow: hidden;

      }

       

      #banner {

      height: 145px;

      width: 940px;

      background-image: url(images/banner_bg.jpg);

      padding-top: 35px;

      padding-left: 20px;

      }

       

      #navbar {

      height: 35px;

      width: 960px;

      background-image: url(images/navbar_longbg.jpg);

      }

       

      #main_image {

      height: 320px;

      width: 960px;

      }

       

      #left_column {

      float: left;

      width: 540px;

      margin-top: 10px;

      margin-right: 10px;

      padding-right: 30px;

      padding-left: 30px;

      background-color: #EDEDED;

      }

       

      #column_container {

      float: left;

      width: 350px;

      margin-top: 10px;

      }

       

      #topright_column {

      width: 300px;

      padding-right: 25px;

      padding-left: 25px;

      background-color: #EDEDED;

      background-image: url(images/colpractice02.gif);

      background-repeat: no-repeat;

      }

       

      #bottomright_column {

      width: 300px;

      padding-right: 25px;

      padding-left: 25px;

      background-image: url(images/colcontact02.gif);

      background-repeat: no-repeat;

      background-color: #EDEDED;

      }

       

      #footer {

      width: 960px;

      background: #FFFFFF;

      margin: 0 auto;

      padding-left: 10px;

      padding-right: 10px;

      overflow: hidden;

      }

        • 1. Re: Column alignment is off
          izycrzy

          Without spending a bunch of time troubleshooting your issue I have a couple of quick suggestions.

           

          - In DW you could hold down the Command and Option key, (Alt and Control) (I think) on a PC and then click the tag that is causing you the problem. DW will fly out a menu that tells you every single css element that is being used to style that tag. That's a quick way to compare and see if there's some rule you wrote which is affecting one div and not the other or something else you forgot about.

           

          - If you are just starting the project you could switch to the starter css page templates that come with DW. They all have really nice, stable layouts.

          • 2. Re: Column alignment is off
            Szaint Level 1

            Unfortunately, that option-command trick didn't work for me and I need to understand why the alignment is off so that I don't continue making this mistake. Thanks anyway.