Chris Dodd Chris Dodd - 3 months ago 13
CSS Question

Giving a child div 0 width?

Quick rundown on what I'm trying to achieve;

I'm making a floating(left) side-nav bar with two child elements, the first being a clickable icon which sits in a static position that will set the second child's width from 0 to 100% of the parents width.

I'm trying to figure out why setting the second child's width to 0%/0 achieves nothing, I can only assume I'm missing something really simple here.

Code: JSFiddle

#header{
float:left;
position:fixed;
background:#333;
min-height:100%;
overflow:hidden;
z-index:1;
width:80px;}

#toggle-menu{
background:url(http://i.imgur.com/EQiq0zb.png) no-repeat;
width:50px;
height:50px;
background-size:cover;
margin:15px 15px;}

#nav{width:0%;}


Thanks for helping this noobie in advance,

Dodd

Answer

you are just missing this :)

#nav{width:0%; overflow:hidden;}
Comments