473,327 Members | 1,967 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

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 <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: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
*/

Jun 27 '08 #1
1 2024
On 2008-06-03, donpro <do*********@rogers.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_links, since this isn't really tabular
data.

But I reckon you can get away with floats.
Jun 27 '08 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

82
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | ...
3
by: Tony Benham | last post by:
I've added a footer div to a website, which I've positioned using div#footer {width : auto ; border : 0 ; position : absolute ; bottom : 0 ; margin : 1.33em 1.33em 1.33em 1.33em ; background :...
1
by: Tony Benham | last post by:
Hi, I've been trying for a while, but I still haven't worked out a way of making a footer appear at the bottom of a webpage, and not at the bottom of the browser window ! See...
6
by: Quintus Snapper | last post by:
Hi everyone. I'm just making new HTML pages for a site. This time round I've brushed up on my CSS and trying to use as much of it as possible and as well as trying to keep it W3C compliant. So...
1
by: Will Buntin | last post by:
I am trying to design my site without tables, using CSS for positioning and am having limited success. My main issue is I have a three column layout and my footer needs to run across the page,...
6
by: NWhite | last post by:
Hi all, Could I ask: how do I drop the footer below the content in, for example, this page (and therefore the rest of the site where the problem arises): www.nowpc.co.uk/error404.html It seems...
0
by: Robert Ashby | last post by:
I have a .jpg footer on my .aspx web page. When the datagrid loads it floats over the top of the web page footer. The footer does not move. I would like to footer to float on the web page and...
17
by: tshad | last post by:
Many (if not most) have said that code-behind is best if working in teams - which does seem logical. How do you deal with the flow of the work? I have someone who is good at designing, but...
7
by: Andrew | last post by:
I've been struggling to achieve the following layout for some time now and I'm not getting anywhere. I've tried several approaches including floats & absolute positioning and none seem to work,...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.