Side bar backgrounds not working

Question

I'm having trouble getting the background images to flow to the bottom of the site within my sidebars. What am I doing wrong? Also the content in the center of the page has decided to bunch up and I'm not sure how to fix that either...

How do I get it all to be an even three column layout?

https://jsfiddle.net/ofusmgbn/

Here is the css and html

h1{
    background-color: black;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    font-family: Peralta;
    color: white;
    height: 75px;
    padding-top: 25px;
    padding-left: 150px;}

h2{
    font-family: Peralta;
    text-align: center;
    height: 25px;
    background-color: white;
    padding-top: 0;}

p{
    border-bottom: 1px solid black;
     padding-bottom: 4em;
    height: 80px;}

img{
    float: left;

    margin-right: 1em;
    width: 150px;
    height: 100px;
    padding-left: 10px;
    border-radius: 20px;}



ul li {
  display: inline-block;
}

ul li a:link{
    text-decoration: none;
    color: black;}

*{
    -moz-box-sizing:border-box;
    box-sizing: border-box;
}

.sidebar1{
    float: left;
    width: 265px;
    padding: 0 20px 0 20px;
   background: url(sidebar1background.jpg);
    background-repeat: repeat-y;

}

.main{

    float: left;
    width: 60%;
     padding: 0 20px 0 20px;
    background-color: #d4ff80;
}

.sidebar2{
    float: right;
    width: 265px;
    padding-right: 30px;
     padding: 0 10px 0 20px;
    background: url(sidebar2background.jpg)right top;
    background-repeat: repeat-y;


}





#footer{
    clear: both;
    height: 50px;
    padding-top: 15px;
    background-color: black;
    color: white;
    text-align: center;
}







SylviaGunter WEB-210 Project 6







 



 



    
        


    
        Best TV Ever
            

[insert menu toggle here]
[insert menu checkbox here]



    50s
    60s
    70s
    80s
    90s
    




   Best Prime Time Shows

    Alice
    All In The Family
    Barney Miller
    Beverly Hillbillies
    Bewitched
    The Bob Newhart Show
    The Brady Bunch
    Gilligan's Island
    Good Times
    The Love Boat
    Mary Tyler Moore
    M*A*S*H
    Maude
    One Day At A Time
    Petticoat Junction
    Soap
    Taxi
    What's Happening
    Welcome Back Kotter
    WKRP In Cincinatti


            




The Genius of Krofft

H.R. Pufnstuff

 H.R. Pufnstuf centered on a shipwrecked boy named Jimmy. He and his friend, a talking flute named Freddy, take a ride on a mysterious boat, which promised adventures across the sea, to Living Island. The Mayor of Living Island was a friendly and helpful dragon named H.R. Pufnstuf. The boat was actually owned and controlled by a wicked witch named Wilhelmina W. Witchiepoo who rode on a broomstick-like vehicle called the Vroom Broom. She used the boat to lure Jimmy and Freddy to her castle on Living Island, where she was going to take Jimmy prisoner and steal Freddy. But Pufnstuf found out about her plot and was able to rescue Jimmy when he leaped out of the enchanted boat with Freddy and swam ashore.

Lidsville



The show involved a teenage boy named Mark who fell into the hat of Merlo the Magician and arrived in Lidsville, a land of living hats. The hats on the show are depicted as having the same characteristics as the humans who would normally wear them.

The Bugaloos


The Bugaloos featured a musical group composed of four British-accented teenagers, who lived in fictional Tranquility Forest. They wore insect-themed outfits with antennae and wings which allowed them to fly. They were constantly beset by the evil machinations of Benita Bizarre, played by comedienne Martha Raye.

Land of the Lost


Land of the Lost details the adventures of the Marshall family (father Rick and his teenage children Will and Holly) who are trapped in an alternate universe inhabited by dinosaurs, a primate-type people called Pakuni, and aggressive humanoid/lizard creatures called Sleestak.

Sigmund the Sea Monster


The show centered on two brothers, Johnny and Scott Stuart, who discover Sigmund, a friendly young sea monster who had been thrown out by his comically dysfunctional undersea family for refusing to frighten people. The boys hide Sigmund in their clubhouse.

            



   
  Best Superhero Shows

    Batman (1966)
    The Bionic Woman (1976)
    Electra Woman and Dyna Girl (1976)
    The Greatest American Hero (1981)
    The Incredible Hulk (1977)
    Isis (1975)
    Shazam! (1974)
    The Six Million Dollar Man (1974)
    Wonder Woman (1976)

            





Stop watching TV and write some code!

JMJ · Accepted Answer

The problem with your sidebars is that they have no height so they're just stretching to fir the content inside. If you want them to be a certain height, you'll need to define it.

Also, your content is bunched because the height set for the

tags is not enough. Just remove that altogether and make the tags display:block.

Side bar backgrounds not working

Answers (1)

Related Questions