Announcement

Collapse
No announcement yet.

CSS background colour

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    CSS background colour

    Hi

    I am a bit stuck on what is going on with some simple css. I am trying to have a site with colour background outside and white background inside.

    The problem is as soon as I add float:left; to the "main" ID the whole site goes to the background colour

    CSS
    Code:
    body {
        background: none repeat scroll 0 0 #0000FF;
        color: #000000;
        font-size: 12px;
        margin: 0;
    }
    
    #wrapper {
        background: none repeat scroll 0 0 #FFFFFF;
        margin: 0 auto;
        width: 800px;
       
    }
    
    #main {
        float: left;
        width: 600px;
    }
    HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
       <title><actinic:variable name="PageTitle" /></title>
    <actinic:variable name="BaseHref" />
    <link href="actinic.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="<actinic:variable name="CatalogURL" />/favicon.ico" type="image/x-icon" />
    <actinic:variable name="JavaScriptFunctions" />
    </head>
    
    <body onload="<actinic:variable name="OnLoadScript" value="PreloadImages" />">
    
    <div id="wrapper">
    <div id="main">
    <actinic:variable name="INNERLAYOUT" />
    </div>
    dfsgdfgadf
    dfgdfg
    
    </div>
    </body>
    
    </html>
    Can anyone tell me what i am doing wrong????
    Elliott - Weybridge Lights

    www.weybridgelights.co.uk

    #2
    Declare the color on the background as first part of the style. You want a 0000ff browser background, with an 800 wide centered container with white background in which a 600 wide container aligns left, correct? 200px of space going astray?

    I suspect your problem is one of clearing though, put a <div class="clear"></div> just before you close the wrapper and a .clear {clear: both;} in css , you could also add a temporary height if unsure that is the problem.

    Comment


      #3
      Thank you Lee, spend hours last night trying to work it out.
      Elliott - Weybridge Lights

      www.weybridgelights.co.uk

      Comment

      Working...
      X