CODEWITHSUNDEEP
htmlcsspositioning
TheNameHobbs
TheNameHobbs

Reputation: 729

Overflow with CSS positioning

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><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?

Upvotes: 0

Views: 72

Answers (3)

Mat Methodik
Mat Methodik

Reputation: 15

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

Upvotes: 0

Ra&#250;l De Zamacona
Ra&#250;l De Zamacona

Reputation: 159

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/

Upvotes: 0

j08691
j08691

Reputation: 207891

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.

Upvotes: 1

Related Questions