JonahB1968
New Member
I'm going for a trello-style layout. Can anyone please help me figure out why my nested li gets chopped off? There is a comment in my css where the height needs to be specified. If I use a px value, it works, but using a percentage does not. I need it to take up the remaining space, so I can't use a px value.Some parts of HTML have been omitted as they are not needed by JS Fiddle, where I am testing my code.EDITThe block level elements directly inside 'container' all need to stretch to fill container's height, but no more than that.HTML\[code\]<body><div class="header"> <p>Lorem ipsum</p></div><div class="container"> <ul class="horizontal"> <li> <h3> Lorem </h3> <ul class="ipsums"> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> </ul> </li> <li> <h3> Lorem </h3> <ul class="ipsums"> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> </ul> </li> <li> <h3> Lorem </h3> <ul class="ipsums"> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> </ul> </li> <li> <h3> Lorem </h3> <ul class="ipsums"> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> <li>Ipsum</li> </ul> </li> </ul> <div class="clear"></div></div>\[/code\]CSS\[code\]div.header { background-color: #333; color: #fff; padding: 0px 5px 0px 0px;}div.header p { padding: 5px;}div.container { border-radius: 5px; overflow-y: hidden; overflow-x: auto; position: absolute; left: 1em; right: 1em; top: 45px; bottom: 1em;}ul.horizontal { background-color: #ddd; list-style: none; white-space: nowrap; float: left; margin: 0; padding: 0;}ul.horizontal li { margin: 5px 5px 5px 5px; width: 278px; float: left; /* height needs to take up remaining space here, so inner scrolling lists aren't chopped off */}ul.ipsums { list-style: none; min-height: 6.1em; overflow-x: hidden; overflow-y: scroll; background-color: #bbb; padding: .5em .5em .1em .5em; margin: .5em; border-radius: 5px;}\[/code\]http://jsfiddle.net/tdignan/bP9D3/1/Thanks