Is the paragraph in the footer assigned {margin:0;} ?
I’m looking at this jsfiddle https://jsfiddle.net/63c1to60/ and see that the tags in the top of your code are arranged differently from Paul’s and mine. You have subdivided the table-cell into rows. That is not allowed. Both your logo and menu must go inside the one and only header table-cell. You can put menu and logo in separate containers within that table-cell, but the table-cell must remain intact with {height:1px} assigned.
It was not. Didn’t make a difference within the floating container so I didn’t change it from default.
Yeah I changed that (one table header/menu) some posts ago. Still gives me a scroll bar though. Currently going though the code in #7 trying to find out what’s different.
What does “it was not” mean, please? What was not what?
This makes no sense to me 
It’s exactly the same except for minor necessary changes necessary to keep the menu in one line and keep the footer at 32px (it was way bigger in the given code)
Edit: sorry, the footer paragraph margin was not set to 0, as it made no difference in my previous code.
Did assigning margin:0 to the footer paragraph fix the issue with the scroll bar?
No. It did however allow me to assign the positioning of the text with line-height without it affecting the footer height, which is good.
1 Like
What is your current code?
My example suffers from none of these problems.
If you recall I explained that table-rows must always stretch to fill the table vertically and horizontally. If you want one row to take upp all the space then you must set a height of 1px on the other rows. You did not do this when you added your navigation in another row unlike my example where I explained that the header and navigation could all be in the one row where I said assign a class of .top to contain the height to content height only.
The extra height in your footer is the standard margin bottom on the p element and you need to control all margins and padding as you would with any page. The height on the footer even if set to 32px or 1px will always expand to fill the content you put inside it.
The rules are ‘simple’ and table rows must fill the table fully and if you have a 100% high table then no matter how many rows you have they must all stretch to fit the table. If you only want one row to stretch then you simply set other rows to a height of 1px and then they become content height only and do not stretch leaving the one main content cell to stretch to fill available space automatically.
It can be a bit confusing at first because we always tell people not to set a fixed height but the display:table/cell behaviour is different and all heights are treated as a minimum and min-height is ignored.
My current code is in post #26
When I run the jsfiddle code on my PC I don’t see any problems either. It seems to occur when viewed on jsfiddle. RoyBread. have you tried opening the code in your browser directly without using jsfiddle?
Yeah I’m viewing it in Firefox 43.0.1. Fullscreen is fine. Downsize the browser and the pesky bar shows up.
No its not 
Did you mean post #25?
In post 25 there is no scrollbar unless your viewport is smaller than the content you have inside and then a scrollbar will appear on the viewport.
How else can you access content without a scrollbar?
I think we have a logic failure here
What do you expect to happen when the browser height is less than the content you have inside?
Except the content is in fact not taller than the browser height in this case.
This appears in all cases where the browser is not fullscreen (even in full-height less-width).
Can we have a link to the site?
Something is pushing the footer bar below the fold and that something is triggering that vertical scroll bar. Not sure why there is a horizontal scroll bar.
The horizontal scroll bar appears and triggers the vertical scroll bar. The width of the page is not fluid and Firefox does not reflow the content to adapt to shorter height after the horizontal scroll bar appears.
That’s not true and the scrollbars are caused because your browser width is less than the 1080px width that you made your layout and therefore triggers a horizontal scrollbar which takes up room and then causes a vertical scrollbar.
Widen your browser to 1080px or greater or as in my original example set the wrapper to width:100% and max-width:1080px. This will allow the layout to complress much smaller than 1080px width.
Fixed widths are anathema to responsive design so you should trow them away.
Get rid of your heights on left and right as they are not required.
Removing heights on left and right cause a huge whitespace below the nav menu though?
Then that indicates a coding problem.