On 2008-06-03, donpro <donpro-2003@rogers.comwrote:
Quote:
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.
Quote:
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.
Quote:
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_links, since this isn't really tabular
data.
But I reckon you can get away with floats.
