Footer Alignment
-
Hello all,
I’ve just begun to try and figure out how to create WordPress layouts. Right now, I am struggling on how to get the footer to extend across both of my columns. I’m at a loss for what I am not doing!
http://i53.tinypic.com/ht8jo1.jpg
This picture illustrates the problem#footer{ clear: both; padding: 10px 0 0 0; float: left; height: 50px; background: #413d32; }This is my footer coding. I’ve also tried fiddling with the sidebar, but nothing I’ve done there has affected it either.
-
Sooo mark this as resolved?
oh as the sidebar going down to the bottom, you can’t there isn’t any css markup for height: 100%;
so what I do is “fool” the design by having a background image in the wrapper area that has a coloration in the right side of the image and other color on the left side and repeat-x(y?) it down
Edit: Beat me to it! I’ll try your suggestion :).
Actually looking at your code you could put a background: #eee in #wrapper *IF* you put a clear:both; right before the closing </div> of #wrapper
It appears you didn’t use my suggestion of moving #footer out of #wrapper and putting the <div style=”clear:both;”></div> (i use <div class=”clear”></div> with .clear made in the style.css)
The #wrapper will never know it’s block is closed after the floated content and sidebar unless you do.
I’ve made the wrapper changes, but naturally two more problems have cropped up! Is there any way I can stop the wrapper from applying the background to the header area? That, and I need to re-center the footer.
Well what I do is make 2 wrappers, one for ‘entire area of all content’
which wraps the whole #page that confines the width of the entire site
then I have a #content-wrapper that handles just the section with content
so its
<div id="page"> <div id="header"></div> <div id="content-wrapper"> <div id="content"></div> // floated left fixed width <div id="sidebar"></div> // floated right, fixed width <div class="clear"></div> // to make content-wrapper know its block is over </div> <div id="footer"></div> </div>Hmm, that made perfect sense to me, but it’s still not working. It fixed the footer alignment, but the color is still in the header.
Oooh, got it! I put in another
<div style="clear:both;"></div>underneath the header, and that fixed it. I’m glad I at least solved one of my problems on my own XD…okay, now this is resolved! Thanks everyone, so much!well #header, #content-wrapper, #footer { clear: both; } should help
The topic ‘Footer Alignment’ is closed to new replies.