Jump to content

Layout Problems


Drezard

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.