Overflow with CSS positioning - html

Question

http://jsfiddle.net/myxzh/6/
ul {
display: table;
table-layout: fixed;
width: 100%;
padding:0;
position: absolute;
top: -10px;
}
li {
display: table-cell;
height: 150px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;
}
#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
}
#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}
<div id="con">
<div id="logo">
</div>
<div id="list">
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
</div>
I have this code and I am trying to make it where the list elements take up 100% of the red div box. Right now, the list goes outside of the red div which is not what I am trying to do. How do i make the black div(list items) fill up 100% of the red div and not go outside the red div?

Answer 1

If you want the black div to take up 100% of the height and width of the red div, change your CSS to:
ul {
display: table;
table-layout: fixed;
width: 100%;
padding:0;
position: absolute;
margin:0;
bottom:0;
height:100%;
}
li {
display: table-cell;
height: 150px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;
}
#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
position:relative;
}
#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}
jsFiddle example
I added position:relative; to your #con div since your absolute positioned ul element is positioned relative to it's first positioned ancestor, which in your example was the body, but you needed it to be #con. Then I made a few small changes to your ul's CSS rules so that it would take up all the space of the red div.

Answer 2

I changed your mark up a bit, there is no need for the div #list, that why ul exists.
This is the css
#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
position: relative;
}
#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}
#list {
width: 100%;
list-style: none;
position: absolute;
top: 0px;
margin: 0;
padding: 0;
}
li {
float: left;
width: 33.1%;
height: 200px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;
}
Is this good enough?
http://jsfiddle.net/myxzh/11/

Answer 3

A working fiddle --> http://jsfiddle.net/2VvTu/
You needed to set your container element to position: relative; and float your table cells left.
the box sizing property calculates borders and margins as part of the width (rather than default of adding them on on top of the width) --> you'll need to vendor prefix this as appropriate. More about that here --> http://paulirish.com/2012/box-sizing-border-box-ftw/
li {
-webkit-box-sizing: border-box;
display: inline-block;
height: 150px;
margin: 0;
padding: 0;
text-align: center;
width: 33.33%;
float: left;
border: thin purple dashed;
}