Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Simple Column Issue

    I am just putting together a quick test to see how I can do a three column website.

    The problem I am having is that the middle column is appearing slightly lower than the column on the right and left. This only happened after I put a small border around all three columns. Heres a picture:



    The centre column is lower. I have tried quite a lot of different things and it seems like something fairly simple which I am overlooking.

    Here is my basic coding:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Three Column Website</title>
    <link href="css/mycssfile.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <meta name="Keywords" content="Three, Column, Website">
    <meta name="Description" content="Three Column Website.">
    <br>
    <div id="mainleft">
    <h2>LEFT</h2>
    <p>This is the column on the LEFT</p>
    <img src="photos/monkey1.jpg" alt="" name="monkey" id="monkeyleft" width="250" height="167">
    </ul>
    </div>
    <div id="mainright">
    <h2>RIGHT</h2>
    <p>This is the column on the RIGHT</p>
    <img src="photos/monkey1.jpg" alt="" name="monkey" id="monkeyright" width="250" height="167">
    </ul>
    </div>
    </div>
    </ul>
    </div>
    <div id="maincentre">
    <h2>CENTRE</h2>
    <p>This is the column in the CENTRE</p>
    <center><img src="photos/monkey1.jpg" alt="" name="monkey" width="250" height="167"></center>
    </ul>
    </div>
    </body>
    </html>
    and here is my CSS file.

    Code:
    body {background-color: #000000; }
    
    
    #mainleft {
      float: left;
      padding: 0% 2% 0% 0%;
      width: 24%;
    border: 1px solid #ffffff;
    }
    
    #maincentre {
      margin-left: 27%;
      margin-right: 27%;
    border: 1px solid #ffffff;
    }
    
    #mainright {
      float: right;
      padding: 0% 0% 0% 2%;
      width: 24%;
    border: 1px solid #ffffff;
    }
    
    
    #monkeyright{
    margin: 0 0 10px 10px;
    float: right;
    clear: right;
    }
    
    #monkeyleft{
    margin: 0 0 10px 10px;
    float: left;
    clear: left;
    }
    Last edited by davm22; 11-12-2010 at 08:15 AM.

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Have you tried floating all three to the left and only putting right-margins on the left and center?

    You might also consider
    Code:
    * { margin:0 }
    to universally zero out your margins and adding them in one by one to isolate the problem.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    I also notice that you explicitly set the top margins to 0 for the left and right monkey, but did not set the top margin for the center. That's probably your culprit. Top margins poke out of the top of divs. Put a 1px top padding on your divs and that should take care of it.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by marilynn.fowler View Post
    I also notice that you explicitly set the top margins to 0 for the left and right monkey, but did not set the top margin for the center. That's probably your culprit. Top margins poke out of the top of divs. Put a 1px top padding on your divs and that should take care of it.
    Thanks for that. I have now added the margin in for the centre monkey but I think the problem lies in the #maincentre tag. I have tried adding 1px top padding in too but it doesnt seem to work

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello davm22,
    Have you tried validating yet? There are a couple mistakes there the validator will find that may help you.
    See the links about validation in my sig below.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello davm22,
    Have you tried validating yet? There are a couple mistakes there the validator will find that may help you.
    See the links about validation in my sig below.
    Done and all working fine! Thanks

    It was as simple as leaving a </ul> in after a copy and paste when they werent needed

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    If I add some comments that identifiy div closing tags and do some indention... you can easily see the extra markup that does not belong. Look at these bits highlighted in red -
    Code:
    <body>
        <div id="mainleft">
            <h2>LEFT</h2>
            <p>This is the column on the LEFT</p>
            <img src="photos/monkey1.jpg" alt="" name="monkey" id="monkeyleft" width="250" height="167">
            </ul>
        <!--end mainleft--></div>
            <div id="mainright">
                <h2>RIGHT</h2>
                <p>This is the column on the RIGHT</p>
                <img src="photos/monkey1.jpg" alt="" name="monkey" id="monkeyright" width="250" height="167">
                </ul>
            <!--end mainright--></div>
    </div>
    </ul>
    </div>
        <div id="maincentre">
            <h2>CENTRE</h2>
            <p>This is the column in the CENTRE</p>
            <center>
            <img src="photos/monkey1.jpg" alt="" name="monkey" width="250" height="167">
            </center>
            </ul>
        <!--end maincentre--></div>
    </body>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    davm22 (11-12-2010)

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Your use of the center tag and Transitional DocType may not be doing you any favors later on down the road.
    Check out this simple 3 column layout .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks again. Think I will use comments and I'll take a look at that link, thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •