SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    simple 3 column layout

    I'm just about finished reading site point's latest book on css and am not experimenting with designing without tables. However, I'm having problems with the columns not aligning right underneath the header div. The left column aligns up good, but the middle and right divs both line up to the bottom of the div to the left of them. Any suggestions? Here's my stylesheet:

    Code:
    body {
    	background-color: #000000;
    	
    }
    
    #divwrap {
    	position: absolute;
    	left: 50%;
    	margin-left: -350px;;
    }
    
    #header {
    	background-color: white;
    	height: 100px;
    	width: 700px;
    }
    
    #leftcol {
    	position: relative;
    	background-color: teal;
    	width: 175px;
    }
    
    #midcol {
    	position: relative;
    	background-color: lightblue;
    	top: 0px;
    	width: 350px;
    	height: 100%;
    	margin-left: 25%;	
    }
    
    #rightcol {
    	position: relative;
    	background-color: blue;
    	width: 175px;
    	margin-left: 75%;	
    }
    
    #footer {
    	background-color: royalblue;
    }
    thanks in advance!
    Greg

  2. #2
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you post a link? The CSS alone is not usually enough to reproduce a problem.

    By the way, you have two semicolons after your margin-left in #divwrap.

  3. #3
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, position: relative; isn't doing anything for you. This lays out the elements in the normal flow then offsets them based on the values you specify for top, right, bottom, and/or left.

    You may want to try using float: left; (or some variant) on each of your columns and add clear: both; to your footer.

    Edit:


    Added some links.

  5. #5
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try making #divwrap position: relative; and #midcol position: absolute;

  6. #6
    SitePoint Zealot Skibum1321's Avatar
    Join Date
    Jun 2003
    Location
    Malden, MA
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay so I tweaked this quite a bit and I think I did the layout you wanted.
    A couple of notes about this:
    1. I made the widths to be in % rather than pixels. It's better for resizing.
    2. I took the header and footer out of the divwrap. It's just easier that way.
    3. Absolute vs. relative positioning is tricky. You want to use absolute when you want to position 2 elements in reference to each other like I did with the header and divwrap and footer. You also want your longest element in the divwrap to be absolute so that it will stretch with that element.
    Without further adieu, here's what I came up with.
    Code:
    body {
    	background-color: #000000;
    	
    }
    
    #divwrap {
    	position: relative;
    	left: 15%;
    	width:70%;
    	margin:0px 0px 0px 0px;
    	padding:0px 0px 0px 0px;
    }
    
    #header {
    	left: 15%;
    	width:70%;
    	position:relative;
    	background-color: white;
    	height:100px;
    }
    
    #leftcol {
    	position: absolute;
    	background-color: teal;
    	top:0px;
    	left:0px;
    	width: 25%;
    	margin:0px 0px 0px 0px;
    	padding:0px 0px 0px 0px;
    }
    
    #midcol {
    	position: absolute;
    	background-color: lightblue;
    	top:0px;
    	width: 50%;
    	left:25%;
    	height: 100%;
    	margin:0px 0px 0px 0px;
    	padding:0px 0px 0px 0px;	
    }
    
    #rightcol {
    	position: relative;
    	background-color: blue;
    	top:0px;
    	left:75%;
    	width: 25%;
    	margin:0px 0px 0px 0px;
    	padding:0px 0px 0px 0px;	
    }
    
    #footer {
    	position:relative;
    	top:0px;
    	left:15%;
    	width:70%;
    	background-color: royalblue;
    	margin:0px 0px 0px 0px;
    	padding:0px 0px 0px 0px;
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    
    
    
    <div id="header">
    <p>&nbsp;</p>
    </div>
    <div id="divwrap">  <!-- begin div wrap -->
    <div id="leftcol">
    <p>&nbsp;</p>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    </div>
    
    <div id="midcol">
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    </div>
    
    <div id="rightcol">
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    </div>
    </div> <!-- end div wrap -->
    <div id="footer">
    <p>&nbsp;</p>
    </div>
    
    
    
    </body>
    </html>
    Keith Rousseau

  7. #7
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!!!

    So say only the left column had content in it. How would you get the middle and right columns to stretch to the same length as the column with the content in it? I tried setting the height of the divs to 100%, but it doesn't work.

  8. #8
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ISTR someone giving a workaround for this a day or so ago, using floats and a cleared footer. Have a search, it should be easy enough to find

    Never mind, I think it was this one:
    http://www.sitepointforums.com/showt...hreadid=116761


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
  •