1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Layout - Problem with CSS & DIV's

Discussion in 'HTML, Graphics & Programming' started by MagSafe, 15 Feb 2006.

  1. MagSafe

    Wise Guy

    Joined: 12 Aug 2004

    Posts: 1,009

    Location: Glasgow, Scotland

    Hey,

    I'm trying to produce the layout shown below:

    [​IMG]

    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>
     
  2. lookitsjonno

    Mobster

    Joined: 10 Sep 2003

    Posts: 4,336

    Location: Midlands

    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
     
  3. MagSafe

    Wise Guy

    Joined: 12 Aug 2004

    Posts: 1,009

    Location: Glasgow, Scotland

    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:
     
  4. MagSafe

    Wise Guy

    Joined: 12 Aug 2004

    Posts: 1,009

    Location: Glasgow, Scotland

    anyone got any ideas? :confused: