CSS Layout - Problem with CSS & DIV's

MagSafe · 15 Feb 2006 at 23:13

Hey,

I'm trying to produce the layout shown below:

and as you can here I can't get the left content area to align properly. From what I can see the CSS isnt being applied to the #left and #right DIV's and I can't see why

Hope someone can help,

Steven.

CSS File

Code:

/*======= Body =======*/
/*====================*/

body { background-color: #cae8ff; color: #0e5e9c; }

#container
{
  background-color: #cae8ff;
  height: 100%;
  width: 700px;
  margin: auto;
  padding-top: 10px;
  color: #0e5e9c;
}

#main
{
  background-color: #cae8ff;
  color: #0e5e9c;
}

/*===== Sidebar ======*/
/*====================*/

#top { height: 40px; }
#bottom { height: 40px; )
#left { float: left; width: 200px; }

/*===== Content ======*/
/*====================*/

#right
{
  float: right;
  width: 500px;
  background-color: #ffffff;
  color: #0e5e9c;
  font-family: "Trebuchet MS";
  font-size: 10pt;
}

/*====== Links =======*/
/*====================*/

a:link, a:active, a:visited 
{
  color: #0e5e9c;
  text-decoration: none;
  background-color: #ffffff;
}

a:hover 
{
  color: #000080;
  text-decoration: underline;
  background-color: #ffffff;
}

Index File

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

 <head>

  <title>Calabay Exclusive</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link type="text/css" rel="stylesheet" href="styles.css" />

 </head>

 <body>

  <div id="container">
    <div id="top"><img src="images/topside.jpg" /></div>

    <div id="main">
     <div class="left"><?php include("sidebar.php"); ?></div>
     <div class="right"><?php include("page.php"); ?></div>
    </div>

    <div id="bottom"><img src="images/bottomside.jpg" /></div>
  </div>

 </body>

</html>

lookitsjonno · 15 Feb 2006 at 23:30

change:

Code:

     <div class="left"><?php include("sidebar.php"); ?></div>
     <div class="right"><?php include("page.php"); ?></div>

to

Code:

     <div id="left"><?php include("sidebar.php"); ?></div>
     <div id="right"><?php include("page.php"); ?></div>

altenatively change #left and #right to .left and ..right in your css.

# is used to represent the element id (only one mind)
. (dot) is used to represent the element class

MagSafe · 16 Feb 2006 at 00:40

jonno.co.uk said:
change:

Code:

<div class="left"><?php include("sidebar.php"); ?></div> <div class="right"><?php include("page.php"); ?></div>

to

Code:

<div id="left"><?php include("sidebar.php"); ?></div> <div id="right"><?php include("page.php"); ?></div>

altenatively change #left and #right to .left and ..right in your css.

# is used to represent the element id (only one mind)
. (dot) is used to represent the element class

d'oh ... can't believe i didnt notice that, i tried changing the class and div around but obviously forgot to change them back properly :rolleyes:

i've tried changing the changing them to div's but it still isnt working :confused:

MagSafe · 16 Feb 2006 at 12:21

anyone got any ideas? :confused: