So the problem is: I have three column layout page. On the right side there is a commercial that I want to be able to turn off on a certain pages so the content expans and the page has two columns instead of three.
I found a solution using display: table-cell
. That works in the biggest browsers but a strange problem occurs only in firefox. When I go to my page the commercial drops down below the content and the content expands. Then when I hit refresh the commercial pops up and everything seems fine.
Can you please help?
Here is the css:
#wrapper{width: 960px; margin: 0 auto;}
#left{float: left; width: 220px; margin: 6px 0 0 5px;}
#content_wrapper{float: left; width: 724px; margin: 6px 0 0 5px;}
#content{min-height: 400px; min-width: 522px; max-width: 724px; border: solid 1px #ccc; padding: 12px; vertical-align:top; display: table-cell; }
#right{width: 168px; padding: 0 6px 0 5px; display: table-cell;}