HTML elements position inside isotope div

Question

I'm playing with the isotope js library and I've got the general concept working. My issue occurs when I put normal html/css such as inputs & charts in the isotope div it's not behaving as I expected. This html works as expected outside the isotope div.

When an isotope div is clicked I'm expanding it and showing details for that item, including inputs, charts etc.

My Goal:

1. Make the table containing the inputs visible in jsfiddle.
2. Understand why this was happening so I can put whatever content I like in here for the future.

JsFiddle showing answer

Code:

Css that was causing the issue. By adding the asterisk this says applyt he style to all child elements. Hence the reason that my table wasn't showing was that the table, rows, cells, elements were all absolutely positioned.

.containerDiv * {
            margin: 0px;
            position: absolute;
        }

The solution css (apply relative position to the table elements):

#chartFilters * {
                position: relative;
            }     

Answer 1

I've done a quick brush up on CSS and solved my problem - see question for updated fiddle. Was a very simple one in the end, it probably looked hard due to my question hence why there were no answers from the community within the last 24 hours.

I hope my steps help someone else who's new to solving these types of issues, browsers have some great tools built in these days for trouble shooting.

Steps I used for solving:

1.) The first useful step I found was to inspect the element with internet explorer via right click on the page. Then use the right click option in the source it shows to copy element with styles. This gave me a smaller version of the html for testing which I saved into a standalone html.

2.) I started pulling out html elements that appeared unrelated and making the sample simpler. Once I pulled something out I'd refresh the html in IE and check what happened.

3.) When I had a simple html I saw the absolute positioning and the asterisk, I then did a quick google to find this stack question explaining what the asterisk does.

4.) I need to leave the absolute styling in so that isotope works, but I can specify relative positioning inside the isotope, I've done this by using the asterisk myself now I know what it does! :)

#chartFilters * {
                position: relative;
            }