Results 1 to 3 of 3

Thread: Left Column Issue with Fixed Layout #3.1

  1. #1
    Join Date
    Jan 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Left Column Issue with Fixed Layout #3.1

    1) Script Title:
    CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)

    2) Script URL (on DD):
    http://www.dynamicdrive.com/style/layouts/category/C12/

    3) Describe problem:

    When I inserted the CSS the left column was not visible:

    #leftcolumn{
    float: left;
    width: 180px; /*Width of left column in pixel*/
    margin-left: -839px; /*Set margin to that of -(MainContainerWidth)*/
    background: #C8FC98;

    To correct this I changed the margin-left from -840 to -839.


    Can anyone explain this to me and if making changes like that will be a problem later on that I do not see.

    Are there certain things in the CSS you should never change to maintain the integrity of the code?

    I'm a newbie to CSS and I'm sure someone else will find this helpful?

    Thanks,

    Will

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    When your margins are negative, they quite literally go off the page. So obviously it won't be visible. Change it to:
    Code:
    margin:0px
    or something to that affect.
    - Mike

  3. #3
    Join Date
    Jan 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    After changing column colors and changing the center column color to white; now there is a 1px white line running down the outside edge of the left column. How can I fix that? Thanks for your help.
    Here is my CSS:
    <style type="text/css">

    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    }

    b{font-size: 110%;}
    em{color: red;}

    #maincontainer{
    background-color:white;
    width: 840px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    }

    #topsection{
    background: #D0D0D0;
    height: 90px; /*Height of top section*/
    }

    #topsection h1{
    margin: 0;
    padding-top: 15px;
    background-color: #D0D0D0;
    }

    #contentwrapper{
    float: left;
    width: 100%;
    }

    #contentcolumn{
    margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
    }

    #leftcolumn{
    float: left;
    width: 180px; /*Width of left column in pixel*/;
    margin-left: -839px; /*Set margin to that of -(MainContainerWidth)*/;
    background: #B7B7B7;
    }

    #rightcolumn{
    float: left;
    width: 190px; /*Width of right column*/
    margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
    background: #B7B7B7;
    }

    #footer{
    clear: left;
    width: 100%;
    background: 999999;
    color: #999999;
    text-align: center;
    padding: 4px 0;
    background-color: #999999;
    }

    #footer a{
    color: #FFFF80;
    }

    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •