ceejay1223 Posted February 10, 2010 Report Share Posted February 10, 2010 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 Quote Link to comment Share on other sites More sharing options...
ceejay1223 Posted February 10, 2010 Author Report Share Posted February 10, 2010 I got the footer down to the bottom now but its overlapping the left navigation. I have the updated .css file attached Quote Link to comment Share on other sites More sharing options...
NuCoder Posted February 10, 2010 Report Share Posted February 10, 2010 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 Quote Link to comment Share on other sites More sharing options...
NuCoder Posted February 10, 2010 Report Share Posted February 10, 2010 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 Quote Link to comment Share on other sites More sharing options...
ceejay1223 Posted February 10, 2010 Author Report Share Posted February 10, 2010 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; } Quote Link to comment Share on other sites More sharing options...
virtual Posted February 10, 2010 Report Share Posted February 10, 2010 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted February 10, 2010 Report Share Posted February 10, 2010 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 Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 11, 2010 Report Share Posted February 11, 2010 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. Quote Link to comment Share on other sites More sharing options...
ceejay1223 Posted February 11, 2010 Author Report Share Posted February 11, 2010 Thanks. If I have any more problems I'll be sure to come back here Quote Link to comment Share on other sites More sharing options...
ceejay1223 Posted February 11, 2010 Author Report Share Posted February 11, 2010 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 Quote Link to comment Share on other sites More sharing options...
Wickham Posted February 11, 2010 Report Share Posted February 11, 2010 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; } Quote Link to comment Share on other sites More sharing options...
ceejay1223 Posted February 11, 2010 Author Report Share Posted February 11, 2010 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.