Question

I’m new to css and stuck and can’t figure out what I am doing wrong. But I would like to have the foot show as three columns. If you look at the image layout and notice the footer has three columns well that’s the i’m trying to achieve. Also the footer dotted lines show past the layout.

Here is my layout: http://gdisinc.com/barker/images/menubar/layout_barker.jpg

Here is the working site: http://www.gdisinc.com/barker/default.php#

Could you tell me what I have to do to fix it. Let me know if you have any questions?

Answer 1

The reason why the third <ul> goes down is because you have an extra 1px of border (border-right: 1px dotted #FFFFFF;).

The way you did it was having a 900px container and divide it into 3 columns. That’s correct.
But once you added an extra border-right: 1px dotted #FFFFFF;, the column width become 301px (300px width + 1px border = 301px).

To solve this, either you make change the container size into 903px. Or you reduce the width size into 299px.

---

The other problem about

the footer dotted lines show past the layout.

Be careful with padding. When you add padding inside a div. It is counted as extra width.

Some part of your CSS for <ul> is:

    width:902px;
    padding:20px;

The total width is 902px (width) + 20px (left padding) + 20px (right padding) = **942px**

To fix this, you change the padding at your <ul> by using padding:20px 0px;. The first value represents top & bottom padding, the second value represents left & right padding.