Jump to content

Recommended Posts

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

Link to comment
https://forums.phpfreaks.com/topic/42637-layout-problems/
Share on other sites

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?

Link to comment
https://forums.phpfreaks.com/topic/42637-layout-problems/#findComment-207011
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.