heroxmatik
New Member
I'm struggling to get a div to expand fully to it's container's height.Markup:\[code\]<div class="container"> <div class="innerOne inner"></div> <div class="innerTwo inner"></div></div>\[/code\]At different viewports \[code\].innerTwo\[/code\]'s content is taller than that of \[code\].innerOne\[/code\]'s but I would like it's background to be the same size as \[code\].innerTwo\[/code\]'sStyles:\[code\].container { width: 100%; height: auto; background-color: yellow; /* clearfix */ *zoom: 1; &:before, &:after { display: table; content: ""; line-height: 0; } &:after { clear: both; }}.inner { float: left; width: 50%; height: 100%; background-color: red;}\[/code\]But the heights wont match up. I know it can be done by giving the container a set height but I don't want to do that since it's a responsive site. Is this possible? I'd rather not use JS.