Drezard Posted March 14, 2007 Share Posted March 14, 2007 Hello, Please check this code out for me: What I wanted was a standard 3 column design with a footer. The first column being 150px wide and being called 'left'. The second column being what ever is left in space and being called 'center'. The third column being 100px from the right side and being called 'right'. And then a footer in the middle at the bottom. Now heres my code: Styles.css /* CSS Document */ /* Version: 1.0 Purpose: This contains all the GUI and Sytles information to use in any HTML document a user will see. Created by: Drezard Last edited: Drezard, 5:59pm 14th March 2007 */ body { min-width: 550px; /* LC * 2 + RC */ max-width: 1200px; } #container { padding-left: 200px; padding-right: 150px; } #container .column { position: relative; float: left; } #center { width: 100%; } #left { width: 200px; right: 200px; margin-left: -100%; } #right { width: 150px; margin-right: -150px; } #footer { clear: both; text-align: center; } Template.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- HTML Document //--> <!-- Version: 1.0 Purpose: This document can be manipulated to be used as a template for any GUI page. Created by: Drezard Last edited: Drezard, 5:59pm 14th March 2007 //--> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" type="text/css" href="styles.css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <div id='container'> <div id='center' class='column'> <p> CENTER </p> </div> <div id='left' class='column'> <p> LEFT </p> </div> <div id='right' class='column'> <p> RIGHT </p> </div> </div> <div id='footer'> <p> FOOT ME </p> </div> </body> </html> What have i done wrong? - Cheers, Daniel Quote Link to comment Share on other sites More sharing options...
aebstract Posted March 14, 2007 Share Posted March 14, 2007 Can I ask you why you want your columns to be a certain distance from the sides? This is going to cause problems when viewed for many reasons: 1) Someone's resolution may be smaller, causing stuff to overlap. 2) If you restore the screen and make it smaller, its going to also cause stuff to overlap. Are you wanting everything overall centered? Quote Link to comment Share on other sites More sharing options...
Drezard Posted March 15, 2007 Author Share Posted March 15, 2007 Yea, just a good layout (im not very good at CSS cause im a PHP programmer) Quote Link to comment Share on other sites More sharing options...
aebstract Posted March 15, 2007 Share Posted March 15, 2007 See if you can read through this page and figure out what they are saying, it will help you out a lot: http://www.glish.com/css/7.asp If you need further help once you try to use this just post your questions and code and I'll try to help. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.