Overflow with CSS positioning

Question

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><a href="news.asp">Hello</a></li>
       <li><a href="contact.asp">Hello</a></li>
       <li><a href="about.asp">Hello</a></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?

You want the black div to take up 100% width and 100% height, or just 100% width of the red div? — j08691
– j08691, Commented May 6, 2013 at 16:13
100% width and height would be nice. I was just trying to figure out the width problem right now — TheNameHobbs
– TheNameHobbs, Commented May 6, 2013 at 16:16

j08691 · Accepted Answer · 2013-05-06 16:19:02Z

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.

Raúl De Zamacona · Accepted Answer · 2013-05-06 16:24:29Z

0

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/

answered May 6, 2013 at 16:24

Raúl De Zamacona

1592 silver badges8 bronze badges

Comments

Mat Methodik · Accepted Answer · 2013-05-06 16:35:34Z

0

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;
}

answered May 6, 2013 at 16:35

Mat Methodik

154 bronze badges

Collectives™ on Stack Overflow

Overflow with CSS positioning

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related