Grow your CSS skills. Land your dream job.

Columns not butting up to the headers and footers.

  • # August 19, 2008 at 5:37 pm

    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:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




     

    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).

    # August 19, 2008 at 6:11 pm

    I am not sure I understand what you are asking. Do you want your sidebar to touch the header and footer? What exactly do you need help with?

    # August 19, 2008 at 9:17 pm

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

    Thanks much.

    # August 20, 2008 at 2:16 am

    I think it might have something to do with your menu. If you look at the site in I.E 7, the menu is messed up. There must be something pushing down on the sidebar. in I.E 7, the sidebar looks good and the menu is messed up and it’s the opposite way on firefox and opera. I would get rid of the sliding menu and see if that fixes it.

    # August 20, 2008 at 6:44 am

    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 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".