SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Bournemouth
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy What am I doing wrong?!

    No doubt some of you will assume that this is one of the easiest things in the world to do, but I just can't seem to get it right - the infamous 3 column layout

    I'm trying to create a basic looking page with a fixed height header, followed by a "main" content area containing 3 columns. I want the left and right columns to be of fixed width (100px each), and i'd like the centre column to fill the space in the middle. Between each column, and around the edge of the "main" area i'd like a 5px margin.

    Whilst I can achieve a 3 column page using the "float left" attribute, I can't seem to get the centre column to do what I want it to do. Unless I set a width (which obiously means calculating the "correct" width if I want it to look right), the centre column forces the right div to drop. What is wrong with this code? Can I achieve what I want to do without setting a fixed value for the centre div?

    CSS and HTML are below:

    CSS:

    Code:
    /* Three Column */
    
    body {
    width: 100%;
    height: 100%;
    background-color: #CCCCCC;
    margin: 0px;
    padding: 10px;
    }
    
    #container {
    width: 770px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    background-color: #666666;
    border: 1px solid #000000;
    }
    
    #header {
    width: 760px;
    height: 150px;
    text-align: center;
    margin: 0px auto 0px auto;
    border: 1px solid #000000;
    background-color: #CCCCCC;
    }
    
    #main {
    width: 760px;
    height: 600px;
    margin: 5px auto 5px auto;
    border: 1px solid #000000;
    background-color: #33CCFF;
    }
    
    #left {
    width: 100px;
    height: 250px;
    text-align: center;
    margin: 5px 0px 0px 5px;
    float: left;
    border: 1px solid #000000;
    background-color: #CCCCCC;
    }
    
    #content {
    width: 510px;
    margin: 5px 0px 0px 5px;
    padding: 10px;
    float: left;
    border: 1px solid #000000;
    background-color: #CCCCCC;
    }
    
    #right {
    width: 100px;
    height: 400px;
    text-align: center;
    margin: 5px 5px 0px 5px;
    float: left;
    border: 1px solid #000000;
    background-color: #CCCCCC;
    }
    
    #footer {
    width: 760px;
    height: 150px;
    text-align: center;
    margin: 0px auto 0px auto;
    border: 1px solid #000000;
    background-color: #CCCCCC;
    }
    HTML:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Three Column Layout</title>
    <link href="threecolumn.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    </body>
    <div id="container">
    	<div id="header"><h2>ID HEADER</h2></div>
    	<div id="main">
    		<div id="left"><h3>ID LEFT</h3></div>
    		<div id="content">
    			<h3>ID CONTENT</h3>
    			<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
    		</div> 
    		<div id="right"><h3>ID RIGHT</h3></div>
    	</div>
    	<div id="footer">ID FOOTER</div>
    </div>
    </html>
    I'd REALLY appreciate anyone who could spend some time on explaining this to me - i've read through countless threads on here trying to figure it out but I just can't I'm new to CSS in case you hadn't gathered!!

    Kelvin.

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't float the centre - use margins.
    Here's something similar.

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Bournemouth
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    Thankyou so much!


Bookmarks

Posting Permissions

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