Someone just told me that on her laptop, this site, the last menu item (Testimonials) is dropping off the page. Also, the dotted lines are not lining up in the columns under that top image. If you have a laptop (I know it will depend on screensize) can you check this for me?
it’s not a laptop issue … it’s a container size issue.
I checked and everything was fine … but then decided to enlarge/reduce font sizes and POOF the columns dont end up deign the same height PLUS then the content overflows, which is what you client was probably seeing.
make sure #columns doesnt have a fixed height (fixed height is a bad idea anyway), use a float clear mechanism instead, such as: .clearfix, or overflow:hidden, etc.
as far as the column dividers, that’s kinda risky to make them depend on the actual column (each column height can vary as we just saw, and the border will only go as far as the height of the column)
use a faux colum technique, such as: pseudo elements, or a bg image on #columns.
hope that helps. 
Thanks Dresden! Not sure if you also noticed the navigation falling to the next line? Not sure if you were mentioning that or just the columns under the main image?
the nav at the TOP is, (the main nav overflows the content). However, I assumed that was desired since its a GOOD idea from an ACCESSIBILITY point of view. Do you really want it to not wrap (ask yourself why?), if so you can use .topnav li{display:inline-block ; } and .topnav ul{ white-space:nowrap; }
Who told you that this is a laptop issue, it may be an issue of container or navigation.
Hi,
The problem with the nav menu is that you have spaced the menu items apart using padding + the size of the text to make them fit your screen. Unfortunately browsers all render text at different widths and therefore some browsers will lose the last item because it can’t fit. There can be up to 50px difference in width along the line of multiple items so you always have to allow breathing space.
You either have to allow a lot more room or use other methods to set up that nav.
You could just reduce the padding for all:
#navlist a {
padding: 5px 13px;
}
That should fix it for all browsers but of course testimonials won’t reach the edge but hopefully that shouldn’t really matter. If you wanted it exact then you would need to add a class to each anchor and apply a width for each of the items so that you know they add up exactly to the available width. Then you just centre the text in each item without using horizontal padding.
Alternatively for IE8+ you could use the display:table and table-cell properties and set it up like a table and the css table will make it fit automatically.
Your three columns don’t have a min-height that is greater than the content so they don’t match up and the height on the wrapper is wrong also.
Try something like:
.col1,.col2,.col3{min-height:268px!important}
#columns{
height:auto;
overflow:hidden;
}
Or alternatively remove all min-heights and use a repeating image on #columns for the two dividers and then they will always appear to be equal.
The overflow:hidden was used to contain the floats. Without it the container has no height as the floats just stick out. Overflow other than visible creates a new block formatting context and elements that create a new block formatting context automatically contain their child floats (display:inline-block, display:table, float and absolutely positioned elements will all contain their child floats because they all create a new block formatting context). You can also use the “clearfix” technique or the old fashioned clearer div in the mark up (to be avoided if possible).
The min-height on the columns was just to make them equal height but will also let them expand if a user increases the text size (the columns won’t be equal but the text won’t overflow on resize). You rarely want to add a height to elements that hold fluid text content (unless its just a single controlled line).
The height:auto was just to over-ride the height that you set. The default for an element is height:auto so there is no need to set it unless you need it to over-ride a previous rule.
Thanks Paul. I tried what you suggested and still falling off the edge so I added dresden_phoenix’s suggestion:
.topnav li{display:inline-block ; } and .topnav ul{ white-space:nowrap; }
(I had .topnav li {display:inline;})
White-space:nowrap will stop the text wrapping but isn’t a perfect fix as such. It will merely hide the problem as it will force the text to stay on one line but the text will in fact overstep its boundaries on some browsers/monitors/text preferences and just move the text further right outside of the nav. This may be ok in some instances but may look off if it pushes too wide (as on your clients laptop) and will likely to mess up smaller devices also when they try to scale the page smaller.
The issue is that a single line nav is a bad idea unless you cater for text that may wrap. The display:table method will cater for this by wrapping the text within each menu line just as a table would and the menu won’t break. Alternatively adding the dimensions to each list element will allow the text to scale up quite a few times because there will be no need for horizontal padding as I mentioned earlier. ( A third method is to float the menu items but not float the last item. In that way you can remove padding from the last item, set overflow:hidden (and zoom:1.0) instead on the last item to create a rectangular block and then centre the text. This removes the need for horizontal padding on the last item and gives you extra space - although this may not always be enough and therefore options 1 and 2 are more resilient.
The vertical dotted lines are still misplaced because you haven’t used the 268px min-height as I stipulated. You used 260px which isn’t enough to cover the content. However, as I mentioned before the fullproof method would have been a repeating gif on the container and avoid any min-heights at all.