I am not 100% sure if I am posting this is the right section.
I have a site coded in HTML with a table with three columns. The tables height is set to 100%. I have divs inside the columns.
The two outer columns do fit the contents properly. The center column’s height is set to 100% as is the div for that column. Then inside that center div I have nested another table that is output by PHP that duplicates itself to display products. The problem is in firefox the center column does adjust height and is longer then the two outer tables. In IE/Safari/Chrome the center column gets scroll bars.
Can anyone help me figure out how to fix this issue?
I’m guessing that your problem is that you are setting divs to height:100% and css doesn’t work like that. Read the css faq on 100% height as it’s an important concept.
You can’t set 100% height on an element unless its parent has a height defined (i.e. a height not defined by its content and not height:auto). If the parent has a height set (e.g. 500px) then you could set the inner element to height:100% and it would work for a little while. However as soon as the inner content reaches the 100% mark then it breaks out because 100% is a fixed height and cannot grow.
Only tables (or display:table) allows you set a height and then allow content to exceed that height if needed.
You cannot simply make equal column in CSS by using 100% height. There are faux column methods (and overlay methods) that can do this or for modern browsers (IE8+) you can use display:table properties.
I’d need to see the page/design to offer an alternative.