Workign with floating elements in footer

问题:

My website is on the local server right now however this will be a simple fix for those of you who know whats it's called.

I'm trying to get these lists (bordered in white) to float the the far left in the available space of the footer(bordered by black).

This is my CSS

#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px;/*border: 1px solid #0C0;*/}
#footer a { text-decoration: underline; color: #c7bd89; }
#footer a:hover { text-decoration: none; color: #fff; }

#footer h6 { background: url(img/FOOTER-HR-BG.jpg) left center repeat-x; text-align: left;}
#footer h6 span { background: #8e2023; display: inline-block; padding-right: 5px; }


.footer-widgets { width: 960px; height: 503px; margin: 0px auto; padding: 0px; border: 1px solid #000;}
.footer-widgets li { width:280px; height: auto; list-style-image: none; list-style-position: outside; list-style-type: none; float: left; color: #fff; padding: 13px; margin-right: 10px; /*border: 1px solid #fff;*/ }
.footer-widgets li ul {color: red;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}
.footer-widgets li p { font-size: 1em; line-height: 18px; text-align: left; /*border: 1px solid red;*/  }
.footer-widgets li h2 { font-size: 1.4em; font-weight: normal; letter-spacing: 1px; line-height: 30px; text-align: left;}
.footer-archives { position: relative; top: -210px;}
.footer-widgets li.last { position: relative; top: -210px;}

h6 { font-family:Verdana, Geneva, sans-serif; font-size: 1.2em; font-weight: normal; letter-spacing: 1px; margin-top: 15px; margin-bottom: 10px; color: #fff;}

.footer-copyright { position: absolute; width: 900px; left: 50%; margin-left: -450px; top: 400px; height: 100px; font-family: Tahoma, Geneva, sans-serif; line-height: 22px; font-size: 1em; color: #fff; text-align: center; text-transform: uppercase; }
.footer-copyright a { color: #fff !important; text-decoration: none !important; }
.footer-copyright a:hover { color: #c7bd89; text-decoration: underline !important; }

.copyright { margin-top: 27px; text-transform: uppercase; display: block; color: #cc9798;}
.copyright a { color: #cc9798 !important; text-decoration: underline; }

.footer-one, .footer-two, .footer-three, .footer-four { border: 1px solid #fff; float: left;}

I have the containing footer and within the 900px x 503px container I wish that all lists float left (and under each other if it's small enough). So "Archives" would flow under "Follow Us" and if I were to put a search bar under "Testimonials" it would fit.

What can I do with my CSS to have this happen?

回答1:

Why no just create a column for each side (left, center, right) and simulate it that way, well atleast I think this is what you are trying to achieve

Fiddle http://jsfiddle.net/eEwdk/

Theres another workaround that would consist in making each li element absolute positioned and calculating it's position (yeah I know it's sound redundant)

回答2:

As I understand it, you want each of the li elements underneath one another. To do that you want to float the ul element to the left, not each individual li element.