PDA

View Full Version : border right problem - length



quartzy
Oct 18th, 2009, 07:06 PM
I have a bottom footer on my webpage bytesizeoffice.co.uk that is quite large as it has links to most of the pages on it. The problem is that the border that separates the columns is all different sizes, even though I made the css a certain height. I cannot seem to figure out why and it is very frustrating. Can anyone help me?
I enclose the necessary coding.



#first, #second, #third, #fourth, #fifth, #sixth {
width: 150px;
height: 230px;
margin: 0;
float: left;
font-size: 0.76em;
padding-left: 10px;
padding-right:7px;
border-right: 1px solid gray;
height: auto;}
#fifth {border-right: none; width: 140px;}

#footer
{clear:both; text-align: left; background-image: url('../images/stripe.gif'); background-repeat: repeat; border-top: 1px solid #F4F4F4; height:230px;}

and for the copyright info I have this:


p.footend
{clear:both; text-align:center; font-size: 0.66em;}

Excavator
Oct 18th, 2009, 08:05 PM
Hello quartzy,
Look what happens when you give it a different width:

#first, #second, #third, #fourth, #fifth, #sixth {
width: 150px;
height: 160px;
margin: 0;
float: left;
font-size: 0.76em;
padding-left: 10px;
padding-right:7px;
border-right: 1px solid gray;
}

When you give it both height:220px; and height:auto; I believe the lower one overrides the first one.

If you remove the CSS reset, you can see a change too. Delete this bit from your CSS to see what I mean:
* {
margin: 0;
padding: 0;
}

Maybe assigning a margin/padding to your #footer ul would clear this up.

abduraooft
Oct 19th, 2009, 09:58 AM
Hi quartzy,
Since all of them have fixed width, the best bet would be to adopt the faux column method (http://www.alistapart.com/articles/fauxcolumns/).