Repeating Backround Image Down Page/Footer Positioning

[ceejay1223]

I am working on a website for the first time using CSS and I am having two main problems. I am making a 3 column design with header and footer. My problems are first, I want both left and right columns to repeat the backround to the bottom of the page and meet at the footer backround. And second, I can't get the footer to the bottom of the page by itself.

 

links are:

http://cjwalizer.vacau.com/firstcss.php - problem link

http://cjwalizer.vacau.com/mycss.css - if the attachment doesn't work

http://cjwalizer.vacau.com/index.php - is what I basically want it to be laid out as.

 

The last link I did in all tables but it doesn't work well with Firefox unless I do some serious editing

[ceejay1223]

I got the footer down to the bottom now but its overlapping the left navigation. I have the updated .css file attached

[NuCoder]

I have not checked your code nor site - but I am sure you are not repeating the background at the Y axis

 

# {

background-repeat: repeat-y

}

 

Your footer - are you adding clear: both?

 

#footer {

clear: both;

}

 

This will allow the footer to float under the other divisions above it

[NuCoder]

I am working on a website for the first time using CSS and I am having two main problems. I am making a 3 column design with header and footer. My problems are first, I want both left and right columns to repeat the backround to the bottom of the page and meet at the footer backround. And second, I can't get the footer to the bottom of the page by itself.

 

links are:

http://cjwalizer.vacau.com/firstcss.php - problem link

http://cjwalizer.vacau.com/mycss.css - if the attachment doesn't work

http://cjwalizer.vacau.com/index.php - is what I basically want it to be laid out as.

 

The last link I did in all tables but it doesn't work well with Firefox unless I do some serious editing

 

Do not use tables for your layouts - continue to learn CSS

[ceejay1223]

Thanks I fixed the footer but the right side navi is still not repeating the background image. The left side navi has more content in it than the right side does and I am using repeat-y. Does that matter in getting it to repeat the whole way down or not? Here is my code for that section

div#affiliates {
   position:absolute;
   top:175px;
   right:0;
   width:15%;
   margin:0 0 0 0;
   border-left:1px solid #000000;
   background: #A5FFB0 url('../imgbin/leftbg1.jpg') top left repeat-y;
   padding:0 0 0 0;
   height:100%;
   text-align:right;
}

[virtual]

I cannot see your site as it is apparently under review. However, when you have different length columns the only way to get the background image to repeat all the way to the bottom regardless of the content in each column is to put the background image on the container that holds the 3 columns. So make one wide background image, doesn't have to be very high, that will encompass the backgrounds that you are probably now putting into each column, and repeat-y on the containing div.

[PicnicTutorials]

Here are five ways to do a three column layout with equal columns and a sticky footer. They each have min/max widths also. Some use images to create the equal columns, some use js, some use borders, and some use negative margins. http://www.visibilityinherit.com/tools.php#three-column-layouts

[Andrea]

You have some coding issues - beginning with the missing doctype - you need

at the top of the document.

 

All your menus should be lists, and then what the others said.

 

Also - and this is just my perception, and maybe the look isn't even what you're working on at this time, but when I first opened your page, all that bright green was VERY overpowering.

[ceejay1223]

Thanks. If I have any more problems I'll be sure to come back here

[ceejay1223]

Hopefully this is the last thing I need. I am trying to put in the info and if I put content in the middle box it doesn't fill out to the width I have the column set to. It will also if the content box gets longer than the left navigation box wrap around it and take up both spaces.

 

Updated versions:

http://cjwalizer.vacau.com/firstcss.php

http://cjwalizer.vacau.com/style.css

[Wickham]

IE7 was showing correctly but Firefox was overlapping #content over or behind #menu.

 

Adding margin-left: 200px; fixed Firefox in my test:-

 

div#content {                margin-left: 200px;
   width:590px;
}

[ceejay1223]

IE7 was showing correctly but Firefox was overlapping #content over or behind #menu.

 

Adding margin-left: 200px; fixed Firefox in my test:-

 

div#content {                margin-left: 200px;
   width:590px;
}

 

Thanks very much! It is working fine now so as long as I don't screw up I should be good.