Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Columns not butting up to the headers and footers.

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23112
    surelock
    Member

    One quick question I am (I am a noob at this CSS stuff also but what I have garnered so far is that it is incredibly powerful and almost but not quite instinctive) having trouble with my columns separating from my headers (and sometimes the footers as well). If I put a border around them they will usually stay put, but I do not always want a border around them. The URL is http://www.back40internetinnovators.com … index3.htm .
    Here is the HTML:

    Code:



    Home Page



     

    The Puzzle Boy - by Nancy Clayburn
    Order your copy now of this tale of love and willful triumph for just $19.95*

    Or you can download this book as a pdf file and have it today*

    We can help YOU!

    After many years of searching and sifting, this family began to unravel the emotional trauma brought on by their son’s autism and grand mal seizures from 7 months old until today at 21 years old. So compelling were their experiences that the Puzzle Boy’s motherwrote a book that shares her personal journey of tragedy, trial, and triumph. Even beyond the book they share here, what they learn as they live everyday with autism.

     

    • The Power of Hope
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio pulvinar fringilla. Nunc blandit interdum metus. Duis leo nunc, sollicitudin ut, fermentum congue, pharetra eu, massa. Suspendisse potenti. Morbi commodo mauris. Ut at pede. Ut id nisi. Donec scelerisque urna quis ligula. Praesent est. Vestibulum scelerisque. Curabitur quam. Fusce rhoncus pellentesque ipsum. Aenean venenatis metus ac quam. Maecenas lacus lacus, sagittis vitae, congue at, euismod eu, urna. Maecenas vitae purus. Praesent eros lectus, porta et, semper nec, molestie eget, tortor.

    • The Power of Peace
    • Lorem ipsum dolor sit amed sed diam nonummy nibh euismod tincidunt ut. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, eu feugiat nulla at vero eros et accumsan et odio qui blandit praesent luptatum augue duis dolore te feugait nulla facilisi.

      Lorem ipsum dolor sit amed sed diam nonummy nibh euismod tincidunt ut. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, eu feugiat nulla at vero eros et accumsan et odio qui blandit praesent luptatum augue duis dolore te feugait nulla facilisi.

    • The Power of Love
    • Lorem ipsum dolor sit amet, contuer adiping elit, sed diam nonummy nibh euismod.

      Lorem ipsum dolor sit amet, contuer adiping elit, sed diam nonummy nibh euismod.Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien.

    • The Power to Accept
    • Lorem ipsum dolor sit amet, contuer adiping elit, sed diam nonummy nibh euismod.

      Lorem ipsum dolor sit amed sed diam nonummy nibh euismod tincidunt ut. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, eu feugiat nulla at vero eros et accumsan et odio qui blandit praesent luptatum augue duis dolore te feugait nulla facilisi.

      Lorem ipsum dolor sit amet, contuer adiping elit, sed diam nonummy nibh euismod.

    • The Power to Embrace
    • Lorem ipsum dolor sit amed sed diam nonummy nibh euismod tincidunt ut. Duis autem vel eum iriure. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien.

    • The Power to Move Ahead Against All Odds
    • Lorem ipsum dolor sit amet, contuer adiping elit, sed diam nonummy nibh euismod.

      Lorem ipsum dolor sit amed sed diam nonummy nibh euismod tincidunt ut.

      Duis autem vel eum iriure dolor in hendrerit in vulputate. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien.

     



     



    And here is the CSS:

    Code:
    @charset “utf-8”;
    /* CSS Document */

    body {
    margin: 0;
    padding: 0;
    background: #C0DFFD;
    font: Verdana, Arial, Helvetica, sans-serif;
    color: black;
    }
    #wrapper {
    margin: 0;
    padding: 0;
    background:#C0DFFD;
    height: auto;
    width: 94%;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }

    #header {
    margin: 0;
    padding: 1em;
    width:97.5%;
    height:120px;
    background: #3366cc url(images/clouds.png) no-repeat;
    }
    #header h1 {
    margin:.8em 0 .2em 0;
    padding:6px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #ccff99 ;
    }
    #header h2 {
    margin:.8em 0 .2em 0;
    padding:3px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #ccff99;
    position: absolute;
    left: 265px;
    top: -24px;
    height: 24px;
    }
    #header h3 {
    margin:.8em 0 .2em 0;
    padding:3px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #ccff99;
    position: absolute;
    left: 262px;
    top: 7px;
    width: 310px;
    }
    #slice {
    margin:0;
    padding: 1px;
    border-top: solid #ccff99 1px;
    border-bottom: solid #ccff99 1px;
    text-align:center;
    background:#ccff99 url(images/slbg.jpg) repeat-x;
    width:99.9%;
    height:34px;
    }

    #contents {
    margin: 0 ;
    padding:0 6px 0 6px;
    /*border:dashed black thin;*/
    background:#C0DFFD;
    height:1000px;
    font-family:small Verdana, Arial, Helvetica, sans-serif;
    text-align:left;
    }
    #contents h1 {
    margin:.8em 0 .2em 0;
    padding:6px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #3366cc;
    text-align:center;
    }
    #contents h2 {
    margin:.8em 0 .2em 0;
    padding:3px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #3366cc;
    text-align:center;
    }
    #contents h3 {
    margin:.8em 0 .2em 0;
    padding:3px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #3366cc;
    text-align:center;
    }
    #contents h4 {
    margin:.8em 0 .2em 0;
    padding:3px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #3366cc;
    text-align:center;
    }
    #contents a {
    color:dark blue;
    text-decoration: none ;
    }
    #contents a:hover {
    color:white;
    text-decoration:none;
    background-color: black;
    }
    #lcol {
    margin: 0 1em 0 0;
    padding: 6px;
    background:#e6f3ff;
    /*border:solid #e6f3ff 1em;*/
    font:small Verdana, Arial, Helvetica, sans-serif;
    color:black;
    float: left;
    width:226px;
    height:1000px;
    text-align:left;
    }
    #lcol a {
    color:dark blue;
    text-decoration: none ;
    }
    #lcol a:hover {
    color:black;
    text-decoration:none;
    background-color: white;
    }
    #lcol a:visited {
    color:dark blue;
    text-decoration: none ;
    }
    #lcolback {
    background:url(images/lcolbk.gif) no-repeat center;
    }
    .style3 {
    font-size: x-small;
    color: #FF0000;
    }
    .style4 {color: #FF0000}
    a:link {
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    }
    a:hover {
    text-decoration: none;
    }
    a:active {
    text-decoration: none;
    }
    #rcol {
    margin: 0;
    padding: 6px;
    background:#C0DFFD;
    /*border:dashed black thin;*/
    font:small Verdana, Arial, Helvetica, sans-serif;
    float: right;
    width:246px;
    height:1000px;
    text-align:center;
    }
    #footer {
    margin: 0;
    padding: 0;
    /*border-top: dashed black thin;
    border-bottom: dashed black thin;*/
    background: url(images/background4.jpg) repeat-x;
    clear:both;
    width:99%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:x-small;
    color: black ;
    text-align:center;
    height: auto;
    }
    #footer a {
    color:dark blue;
    text-decoration: none ;
    }
    #footer a:hover {
    color:yellow;
    text-decoration:none;
    background-color: black;
    }
    #footer a:visited {
    color:dark blue;
    text-decoration: none ;
    }
    h1, h2, h3, h4 {
    margin:.8em 0 .2em 0;
    padding:0 6px 0 6px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #ccff99;
    }
    img.left {
    margin: 0;
    padding: 0 1.3em 0 1.3em;
    float: left;
    }
    img.center {
    margin: 0;
    padding: 0 1.3em 0 1.3em;
    align:center;
    }

    Any and all assistance will be most appreciated, just as a sidenote the sliding menu is not working correctly in IE7 (and prob IE6 as well).

    #49279
    surelock
    Member

    Yes exactly I want the columns to touch the header and footers.

    Thanks much.

    #49282
    surelock
    Member

    Ok I double checked to make sure everything menu wise was working and everything seemed ok. I added a 1px border the color of my green slice to the top of my wrapper and it closed right up hmmm… oh well I just wanted to know if there was another way to do this.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.