• 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.

Viewing 10 replies - 16 through 25 (of 25 total)
  • 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

    Thread Starter littletitus

    (@littletitus)

    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.

    Thread Starter littletitus

    (@littletitus)

    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>

    Thread Starter littletitus

    (@littletitus)

    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.

    Thread Starter littletitus

    (@littletitus)

    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

Viewing 10 replies - 16 through 25 (of 25 total)

The topic ‘Footer Alignment’ is closed to new replies.