Why exactly would the container's height need to change? Or are you refering to the panel opening/closing? In that case, I direct you to the JS bit of that JSFiddle
Sent from my GT-I9300 using Tapatalk 2
Printable View
Still not sure what you mean by "view" height as opposed to css height. Are you talking about the sliding down effect or not?
The sliding down effect is the result of what I meant. .mainFastOptionContainer is increasing the view height (there is no css height property ofc) on clicking a link.
I was asking for the specific css lines that cause this effect on your provided solution. As I said above I would do it with a clearing div that finalizes inside of .mainFastOptionContainer, but this seemed to be ineffective on the given problem.
If it is unclear still, let us forget it, I will check out your solution in a detailed way soon then.
Ah well tbh I'm not even sure what made my thing work. For clearing, I used "overflow: hidden;" on .mainFastOptionContainer so I didn't have to add any extra clear:both; divs.
The truth is: the code was a mess. The CSS was probably twice as long as it should be: all the different classes for the same things were just too much. As a result, the jQuery bit was also too long. As I said, I generalized everything: a single class for every option and the only changing bit being the red/green/blue gradient.
Oh I did not know hiding the overflow will cause the same effect (and even in js runtime). Pretty neat, as long as all browsers understand this ...
After some research both of our ideas are not the best way to go or are just dirty ...
css - Which method of 'clearfix' is best? - Stack Overflow
I think Micro's clearfix is the best way to go here, it does not?
Well, that is the way to do it right, I approve. ^^
I just said above that overflow:hidden; and zoom:1; auto clears divs in almost every browser. It causes errors too sometimes , but there is also
As suggested on the interwebs. Than you just add class "clear" to any container. It only works on modern browsers , I.e. : Internet Explorer 9 and up , Chrome , Firefox , Opera , and probably SafariPHP Code:.clear:after {
content: "";
display: table;
clear: both;
}
I also specified that his code was a mess , I have also cleaned it , what I didn't do is to add another wrapper , and clear that instead of his wrapper.