3 Column Widget Footer Styling?

  • Resolved palmettostar

    (@palmettostar)


    12 years, 7 months ago

    Site is here: these-words.org which is where I am working on a new theme for my OTHER website, hence the differences in names.

    Some things are out of place due to working on them, but I added a 3 column widgetized footer to this theme using this tutorial. Everything works great except the styling is off…

    How do I get the foot background to extend downwards so it includes the widgets?

    The coding I have for the foot is:

    #footer-widgets {
display: block;
width:950px;
margin-right:0;
background: #ffffff;
}
#footer-widget1 {
width: 260px;
float: left;
margin: 15px 10px 10px 30px;
padding: 10px;
background-color: #ffffff;
}
#footer-widget2 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #ffffff;
}
#footer-widget3 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #ffffff;
}
.footer {
	font-size: 10px;
	color: #333333;
	background-image: url(images/bottom.png);
	background-repeat: no-repeat;
	text-align: center;
	height: 25px;
	width: 1058px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 35px;
	border-bottom-width: 1px;
	margin-top: 0px;
	margin-bottom: 15px;
}

    and in my footer.php file

    <div class="footer" id="footer">
<div id="footer-widgets">
<div id="footer-widget1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-1') ) : ?>
<?php endif; ?>
</div>
<div id="footer-widget2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-2') ) : ?>
<?php endif; ?>
</div>
<div id="footer-widget3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-3') ) : ?>
<?php endif; ?>
</div>
</div>
</div>
<div style="clear-both"></div>
</body>
</html>

    Right now, I have a background that has rounded corners for the footer which I will change to include the stripes from the header, but that needs to be positioned BELOW the widget information – I can’t get it to extend so I’m not sure what I’m doing wrong. Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

  • possibly a typo (in the tutorial);

    this <div style="clear-both"></div>
    should read <div style="clear:both;"></div>

    Thread Starter palmettostar

    (@palmettostar)

    @alchymyth: Thank you for that suggestion, I changed the typo but didn’t change the formatting ??

    the .footer style of your theme has a fixed height, so it cannot expand;
    it also has no background color which is needed when it expands;
    try to integrate those changes:
    .footer {background-color:#fff;background-position: center bottom;height:auto;}
    you will lose the rounded corners.

    —
    you might be better off, moving the footer widget stuff to before this section:

    </div>
<div class="footer" id="footer"></div>

    and the <div style="clear:both;"></div> needs to be moved up by one </div>

    Thread Starter palmettostar

    (@palmettostar)

    @Alchmyth: THANK YOU! It fixed the problem I was having ?? The only thing I didn’t do was move the footer widget HTML above the div class=footer, when I did the widgets weren’t formatted correctly.

    Thank you again!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘3 Column Widget Footer Styling?’ is closed to new replies.