10 Replies Latest reply on May 10, 2010 9:33 AM by Szaint

    Columns are out of place

    Szaint Level 1

      The top of the right column (Practice Areas) in my webpage is not aligned with the top of the left column. Also, the "Contact Us" section below it seems to have the same magical margin space above it. There should be no white space between those sections. The right column is within a column container and the container has a 5 pixel top margin which is the same as the left column's top margin. Can anybody help me?

       

      www.jgraveslawyers.com

        • 1. Re: Columns are out of place
          markerline Level 4

          I need to be able to see your css to help you.  Right now you have it linked in a separate document which is good practice of course.

          • 2. Re: Columns are out of place
            Szaint Level 1

            @charset "UTF-8";

             

             

            body {

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

            font-size: 1em;

            color: #000;

            }

             

            #container {

            width: 960px;

            background: #FFFFFF;

            margin: 0 auto;

            padding-top: 5px;

            padding-left: 5px;

            padding-right: 5px;

            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: 5px;

            margin-right: 5px;

            padding-right: 30px;

            padding-left: 30px;

            background-color: #EDEDED;

            line-height: 130%;

            }

             

            #left_column h3 {

            line-height: 140%;

            font-size: 120%;

            color: #333;

            }

             

            #left_column p {

            font-size: 14px;

            }

             

            #column_container {

            float: left;

            width: 355px;

            margin-top: 5px;

            }

             

            #topright_column {

            width: 305px;

            padding-right: 25px;

            padding-left: 25px;

            background-color: #D6D8D7;

            background-repeat: no-repeat;

            font-size: 10pt;

            line-height: 18pt;

            color: #666;

            font-variant: normal;

            margin: 0px;

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

            }

             

            #bottomright_column {

            width: 305px;

            padding-right: 25px;

            padding-left: 25px;

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

            background-repeat: no-repeat;

            background-color: #D6D8D7;

            }

             

            #footer {

            width: 960px;

            padding-left: 5px;

            padding-right: 5px;

            overflow: hidden;

            background-color: #300;

            margin-top: 0;

            margin-right: auto;

            margin-bottom: 0;

            margin-left: auto;

            padding-top: 20px;

            padding-bottom: 20px;

            }

            • 3. Re: Columns are out of place
              Szaint Level 1

              Thanks for replying.  I posted the CSS in the thread.

              • 4. Re: Columns are out of place
                John Waller Adobe Community Professional & MVP

                Just go to www.jgraveslawyers.com/jgraves.css

                 

                Even better use the free Firebug extension for Firefox to view all the CSS and see on screen which rule affects which page element

                http://getfirebug.com/

                 

                F12 in IE8 offers similar Developers Tools.

                • 5. Re: Columns are out of place
                  markerline Level 4

                  Thanks.  I forgot about Firebug.  With Firebug the OP should be able to solve the problem him/herself.

                  • 6. Re: Columns are out of place
                    Szaint Level 1

                    So if I download Firebug, then my problem will be solved?

                    • 7. Re: Columns are out of place
                      John Waller Adobe Community Professional & MVP

                      If you install Firebug, you can point and click on the screen and see which rules affect which page element.

                       

                      There are several rules affecting what you're trying to achieve.

                       

                      You can learn a lot about CSS and how it works by using Firebug.

                      • 8. Re: Columns are out of place
                        Szaint Level 1

                        I've been looking at the page in Firebug, but I still don't know why the columns are out of place. I understand why this is a useful tool but it can't explain anything to me. Firebug is just showing me the code that I already wrote. Which is incorrect somehow. I need to know why. Maybe I should mention that I'm new to using CSS and this is my first webpage ever.

                        • 9. Re: Columns are out of place
                          osgood_ Level 8

                          The mis-alignment and white space is as a result of the default margin/padding on the paragraph tags in the two <divs>. You need to set them to zero using the css below:

                           

                           

                           

                          #topright_column p {
                          margin: 0;
                          padding: 0;
                          }

                           

                           

                          #bottomright_column p {
                          margin: 0;
                          padding: 0;
                          }

                           

                           

                          If you then find you need some padding or margin for some reason add back what is needed:

                           

                          #topright_column p {
                          margin: 0px 0px 0px 0px; /*top,right,bottom,left*/
                          padding: 0px 0px 6px 0px; /*top,right,bottom,left*/
                          }

                          • 10. Re: Columns are out of place
                            Szaint Level 1

                            Thanks a lot osgood. That CSS worked like a charm. I have no idea why, but I won't worry about that right now.

                             

                            Many many thanks.