htwingnut Posted April 17, 2009 Report Share Posted April 17, 2009 (edited) All main content here. No need for a height if you want height to be flexible. No width so that it moves up between floated divs. Background-colors can be temporary just to identify size of divs. Remember that the total size of an element is the basic size plus margins, padding and borders. All main content here. No need for a height if you want height to be flexible. No width so that it moves up between floated divs. Background-colors can be temporary just to identify size of divs. Remember that the total size of an element is the basic size plus margins, padding and borders. All main content here. No need for a height if you want height to be flexible. No width so that it moves up between floated divs. Background-colors can be temporary just to identify size of divs. Remember that the total size of an element is the basic size plus margins, padding and borders. Edited April 17, 2009 by htwingnut Quote Link to comment Share on other sites More sharing options...
Wickham Posted April 17, 2009 Report Share Posted April 17, 2009 My original code was not designed for fixed header and footer, and you have added height: 100% in too many places. This code is only a partial solution as I haven't had much time. http://www.wickham43.supanet.com/forumposts/htwingnut090417.html You may need to look at items 17a or 19 here to drag down side column backgrounds:- http://www.wickham43.net/firefoxbackground.php and this is an example for fixed header and footer, it involves hacks but does work on all browsers that I have tried:- http://www.wickham43.net/headerfooterfixexample.php Quote Link to comment Share on other sites More sharing options...
htwingnut Posted April 17, 2009 Author Report Share Posted April 17, 2009 (edited) Yeah, I realized I needed height: 100% only in body and wrapper to achieve desired effect. Will try your two options you suggested and see how it works. So far I have tried multiple things, and no luck. Am I really asking too much? It seems like this should be something that would be somewhat common, but I haven't found any examples anywhere that are like this. Closest one is the "456 Berea Street" example, but if you look, the CSS frame only goes down as far as the content. If you remove the content text, you will see what I mean. I was able to get the left side to work with a position: fixed: .left { position: fixed; width: 100px; background-image: url('Images/gray100x125.jpg'); background-repeat: repeat; background-attachment: fixed; } But how do I get the same thing fixed to the right of the "#center" div? I can't figure that one out. Edited April 17, 2009 by htwingnut Quote Link to comment Share on other sites More sharing options...
htwingnut Posted April 18, 2009 Author Report Share Posted April 18, 2009 (edited) Ok, I have something that works, but it's not pretty. I ended up ditching the .left and .right class divs and replaced it with a .background div that included a repeating background the width of the content div. The drawback here is that I have to use this graphic as my background color otherwise I have the same issue with my div background color as I did with the .left and .right. It's not pretty, but it works for the time being. I appreciate any help anyone can continue to offer though to continue down the path that Wickham had started to lead me down, as I know it's the cleanest way. I still haven't figured out why the text at the bottom is still hidden behind the footer, and can't get any margin or padding statement to fix it. I can use a at the bottom of the page to manually scroll it up. It's not right, but it works. See where it's at here: http://www.bourdeaux.net/temp/csstest2.htm Edited April 18, 2009 by htwingnut Quote Link to comment Share on other sites More sharing options...
htwingnut Posted April 18, 2009 Author Report Share Posted April 18, 2009 Oh crap. Nevermind. The only reason this worked is because I used a transparent gif with the middle section transparent. As soon as I assign a background color to the .background, it covered my text. That seems odd since it is supposed to be a "background" color. I even added z-index to each div, and that didn't help either. I'm stuck stuck stuck stuck stuck! ARRRRRGGGHHH! Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted April 18, 2009 Report Share Posted April 18, 2009 http://www.jlhaslip.trap17.com/samples/templates/framed/index.html Quote Link to comment Share on other sites More sharing options...
htwingnut Posted April 19, 2009 Author Report Share Posted April 19, 2009 (edited) Great, thanks! Problem I see is that the scroll bar is hidden by the header and footer. Is there a way to correct that? Also, I think this works for 100% width, not sure about fixed width. I especially need fixed width left and right. Edited April 19, 2009 by htwingnut Quote Link to comment Share on other sites More sharing options...
htwingnut Posted April 19, 2009 Author Report Share Posted April 19, 2009 (edited) YAY! I think I finally got it working properly. Funny thing is it exhibits strange behavior in IE, but if I refresh, everything seems ok. Visit here if you want see it. CSS is in the HTML. http://www.bourdeaux.net/temp/csstest_nb2a.htm Many thanks to this site: http://bonrouge.com/3c-hf-fixed.php Edited April 19, 2009 by htwingnut 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.