My elements in a menu seem to have no width? - css

Question

see this codepen for a demo
EDIT of course, hard coding a width for an element is no solution. It should be just the size of the actual title.
HTML
<br/>
<nav class="navigation">
<div class="navfake"></div>
<div class="singleelement">
<div class="container">
<div class="title">Test title 2</div>
<div class="titlepicture">some picture</div>
</div>
</div>
<div class="singleelement">
<div class="container">
<div class="title">Test title newsfeed super long 1</div>
<div class="titlepicture">some picture</div>
</div>
</div>
</nav>
css
/** the newsfeed and footer */
nav {
width: 100%;
height: 20px;
position: relative;
}
.navfake {
width: 100%;
height: 100%;
background: green;
z-index: 10;
position: relative;
}
.singleelement {
display: inline-block;
height: 60px;
text-align: center;
}
.container {
position: absolute;
top: 0px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
height: 200px;
}
.titlepicture {
position: absolute;
width: 100%;
background-color: red;
z-index: 10;
height: 100px;
overflow: hidden;
}
.container:hover {
top: -80px;
}
.container:hover .titlepicture {
height: 100px;
z-index: 10;
}
.title {
z-index: 555;
position: relative;
height: 20px;
width: 100%;
}
.footer {
position: relative;
z-index: 1000;
background-color: white;
}

Answer 1

The trick was to replace position absolute with position relative
HTML
<nav class="navigation">
<div class="navfake"></div>
<div class="singleelement">
<div class="container">
<div class="title">Test title 2</div>
<div class="titlepicture">some picture</div>
</div>
</div>
<div class="singleelement">
<div class="container">
<div class="title">Test title newsfeed super long 1</div>
<div class="titlepicture">some picture</div>
</div>
</div>
</nav>
<div class="footer">some text blablablablablablabla
<br/>some text blablablablablablabla
<br/>some text
<br/>some text
<br/>some text
<br/>some text
<br/>some text
<br/>xxx
</div>
CSS
/** the newsfeed and footer */
nav {
width: 100%;
height: 20px;
}
.navfake {
width: 100%;
height: 100%;
background: green;
z-index: 10;
position: relative;
}
.singleelement {
display: inline-block;
height: 60px;
text-align: center;
position: relative;
}
.container {
top: -20px;
position: relative; /**changed*/
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
height: 200px;
}
.titlepicture {
position: absolute;
background-color: red;
z-index: 10;
height: 100px;
overflow: hidden;
}
.container:hover {
top: -80px;
}
.container:hover .titlepicture {
height: 100px;
z-index: 10;
}
.title {
z-index: 555;
position: relative;
height: 20px;
width: 100%;
}
.footer {
position: relative;
z-index: 1000;
background-color: white;
}

Answer 2

On .singleelement add some sort of width to it. For example 64px and it will work.
Fiddle: http://jsfiddle.net/7WZk5/

Answer 3

Perhaps this is what you're looking for: http://codepen.io/aytimothy/pen/mlkAh
Have you tried adding the "width:" CSS into your "container" Class?
.container {
position: absolute;
top: 0px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
height: 200px;
width: 50%;
}
Well, 50% since you have two elements. If you want to have different widths for each of them, you could always put the width as a STYLE attribute for each element.