Can I code my footer without Floats ???

https://testbed.odysseyshipping.com/index.php

This is driving me nuts. I've spent much time trying to style this
page footer but because I cannot set widths using "display: inline".
I've tried using floats. Now, for some reason, I can't get my borders
to display properly as it seems to nudge to the right for each level
of my footer (Firefox and IE).

Below is the CSS code.

I also need to place borders between each set of <UL> and am dreading
that. Can I redo this footer without using Floats?

Thanks,
Don


#footer {
padding: 0;
margin: 0;
clear: both;
}

#footer_headers {
width: 100%;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
float: left;
background-image: url(../images/menurest.jpg);
background-repeat: repeat;
color: white;
font-weight: bold;
}

#footer_headers:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #footer_headers { height: 1%; } /* for IE5+6 */
*:first-child+html #footer_headers { min-height: 1px; } /* for IE7 */

#footer_headers .footer_header_title {
margin: 0;
padding: 0;
padding-left: 1%;
width: 24%;
float: left;
font-weight: bold;
}

#footer_links {
width: 100%;
margin: 0;
padding: 0;
float: left;
color: black;
text-align: left;
border-left: thin solid #2a78c3;
border-right: thin solid #2a78c3;
border-bottom: thin solid #2a78c3;
}

#footer_links:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #footer_links { height: 1%; } /* for IE5+6 */
*:first-child+html #footer_links { min-height: 1px; } /* for IE7 */

#footer_links .footer_links_title {
float: left;
width: 25%;
}

#footer_links .footer_links_title ul {
margin: 0;
padding: 10px 10px 10px 10px;
list-style-image: url(../images/acc_arrow.gif);
list-style-position: inside;
}

#footer_links .footer_links_title li {
color: #993300;
text-align: left;
}

#footer_copyright {
width: 100%;
margin: 0;
padding-right: 5px;
text-align: right;
font-size: 85%;
float: left;
border-left: thin solid #2a78c3;
border-right: thin solid #2a78c3;
border-bottom: thin solid #2a78c3;
}

#footer_copyright:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #footer_copyright { height: 1%; } /* for IE5+6 */
*:first-child+html #footer_copyright { min-height: 1px; } /* for IE7
*/

.

Relevant Pages

  • Re: Web pages for algorithm instruction/documentation.
    ... of code with line numbers and support some sort of inline ... padding: 2em 1em; ... float: left; ... display: block; ...
    (comp.infosystems.www.authoring.html)
  • The case of the vanishing List items
    ... padding: 0; ... margin: 5px; ... float: left; ... display: block; ...
    (comp.infosystems.www.authoring.stylesheets)
  • IE float issue with definition lists
    ... I float the dt left, and the dd right with fixed widths for each. ... margin: 0; ... padding: 5px; ... display: inline; ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Find the table height?
    ... offsetHeight is the height of the object relative to the layout or coordinate parent, as given by the offsetParent property. ... the formal definition the informal one is that it contains the height including borders and padding widths. ... >> Charley, ...
    (microsoft.public.frontpage.programming)
  • Re: Standard Module Format
    ... Now, widths and margins can be set for column_1 and column_2, and padding and borders can be set for "inside" using a descendant of it's parent. ... I haven't hacked my way through the wikipedia layout, but they go through some severe measures to order the content. ...
    (comp.infosystems.www.authoring.stylesheets)