Can I code my footer without Floats ???

[donpro]

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 <ULand 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:a fter {
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_t itle {
float: left;
width: 25%;
}

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

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

#footer_copyrig ht {
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_copyrig ht:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #footer_copyrig ht { height: 1%; } /* for IE5+6 */
*:first-child+html #footer_copyrig ht { min-height: 1px; } /* for IE7
*/

[Ben C]

On 2008-06-03, donpro <do*********@ro gers.comwrote:

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

Just lose width: 100% on #footer_links.

Width sets the width of the content area. So if you set width: 100% and
border: 1px the border box will be 2px wider than the container.

You're already setting width: 25% on each of the four floats, so the
container (which "shrinks-to-fit" them) will be the correct width
anyway.

Below is the CSS code.

I also need to place borders between each set of <ULand am dreading
that.

You will initially have the same problem-- if you set width to 25% and
add a border, the border box width will be slightly more than 25%.

But this is easily solved. Remember the old saw: "there is no problem
that cannot be solved with another level of nesting." As it happens you
already have another level of nesting. Leave the floats as width: 25%,
but put borders on the ULs inside them instead. They are auto width and
not floated (or anything else funny) which means the browser will solve
everything for you to make their margin boxes fill their content areas.
Their content areas will be 25% of the total.

Can I redo this footer without using Floats?

You could use a table. You want four sections of equal width with
borders between them. Tables do just that.

If you need to support IE you will need to use an HTML table. If not,
use display: table-cell on each "cell" (.footer_links_ title) and
display: table on div#footer_link s, since this isn't really tabular
data.

But I reckon you can get away with floats.