So I have a div, lets call it “section”, thats width is set to 66%, its parent container is the body. I then have 3 column divs set up, each one has width of 33%. The heights of both the section and columns are default auto right now. I want to have the section that way, so it will expand or contract to the content of the columns as needed. My problem is that I need the columns to be the same height regardless of content. So I want sections height to be auto but columns height to be 100% of the section.
When I set the columns height to 100%, it does nothing. I think you need to give the parent div a defined height, but how do I do that when I want the sections to be whatever height the largest column is?
hmm…cant seem to get the columns the same height using display: table and display: table-cell. Ill keep trying with what you gave me. Theres no other way to do that? Im pretty surprised you cant just set the columns height to 100% of the container.
If you can’t get it working, give us your example that is failing.
Why would you want another way? This is so easy and minimalistic. Percentage heights need the immediate parents height set. ULtimately you have a fixed height somewhere and is not a good way to approach this.
The table/table-cell is the best option EASILY. Pretty easy to implement, as shown in the demo. Show us your attempt if you are stuck.
So I got it working on a desktop. I was using a responsive grid for this and wanted to have 3 panels of content that collapse with media queries but I dont know how to do that with table cells.