We Keep Coding

Transition menu closing with CSS or JS

I have a sidebar div and a content div that act as two CSS grid columns. The sidebar itself is composed of two more columns, but here's the gist of the setup:
<div class='site-wrap'>
<div class='sidebar'>
<div class='navbar'></div>
<div class='menu'>
<ul>
<li>menu item</li>
</ul>
</div>
</div>
<div class='content>
<h1>Hello world</h1></div>
</div>
</div>
Most of the CSS isn't important, but here's how the sidebar works:
.site-wrap {
display: grid;
grid-template-columns: 320px 1fr;
}
.sidebar {
display: grid;
grid-template-columns: 64px 1fr;
height: 100vh
}
Here's a JS Fiddle with a working implementation: https://jsfiddle.net/z4mLtwoy/
Currently, my solution to closing the menu is adding grid-template-columns: 72px 1fr to the site-wrap. This works, but I wish to add a transition. Since CSS grid doesn't have transitions yet, is there a CSS (maybe flexbox) or JS implementation that can offer a transition?

If you set a width or a max-width property to the menu element, it is possible to animate this property using CSS transitions. No need to use grids, you can use a flexbox layout to display them as columns.
body {
margin: 0;
padding: 0;
}
.site-wrap {
display: flex;
height: 100vh;
}
.sidebar {
display: flex;
}
.site-wrap .menu {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
box-sizing: border-box;
height: 100vh;
margin: 0;
overflow: hidden;
padding: 0;
transition: max-width 0.5s ease;
max-width: 100px;
}
.site-wrap .navbar {
background: green;
height: 100vh;
width: 64px;
}
.menu li {
padding: 16px;
white-space: nowrap;
}
.content {
background: #EFEFEF;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
flex-grow: 1;
padding: 16px;
}
.banner {
background: lightblue;
box-sizing: border-box;
padding: 16px;
height: 64px;
width: 100%;
}
#trigger {
display: none;
position: fixed;
}
.button {
background: blue;
color: white;
cursor: pointer;
margin: 8px;
padding: 8px 16px;
}
#trigger:checked ~ .site-wrap .menu {
max-width: 0px;
}
<input id='trigger' type='checkbox'>
<div class='banner'>
<label for='trigger' class='button'>Click me</label>
</div>
<div class='site-wrap'>
<div class='sidebar'>
<div class='navbar'></div>
<ul class='menu'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div class='content'>
<h2>Hello world</h2>
</div>
</div>

Submenu not overlapping the side parent elements

I have created custome side bar for my site, All is fine but I have menu's and submenu's when user hovers on the menu list if it has the submenu then it will show
thats fine. The problem is submenu not overlapping the scrollbar and side parent/sibling element. I have added images here for more clarification.
.menu {
height: 100%;
width:16.16% !important;
position: fixed;
z-index: 1000;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 10%;
background-color: white;
border-right:2px solid #f1f1f1;
}
.menu ul {
list-style-type: none;
margin-left:-40px;
margin: 0;
padding: 0;
}
.menu ul > div{
font-weight:bold;
font-size:18px;
margin-top: 10px;
margin-bottom:0px;
border-bottom:1px solid #f1f1f1;
cursor: pointer;
}
.menu ul li {
padding: 5px;
position: relative;
vertical-align: middle;
height:auto;
width: 100%;
border-bottom:1px solid #f1f1f1;
font-size: 16px;
padding-left:10px;
}
.menu ul ul{
min-height: 30px;
transition: all 0.3s;
opacity: 0;
position: absolute;
visibility: hidden;
left: 80%;
top:100%;
border: 1px solid #f1f1f1;
z-index: -1000000;
}
.menu ul ul > li{
width: 250px;
height: auto;
background-color: white;
border-bottom: 1px solid black;
}
.menu > ul > li > div > i{
float: right;
vertical-align: middle;
line-height: 1.5;
}
.menu ul li:hover{
background-color:#cccccc;
cursor:pointer;
opacity: 1;
}
.menu ul li:hover > ul{
opacity: 2;
visibility: visible;
z-index: 100000000;
//left: 100%;
}
<!-----Header will come here ----->
<div class="container-fluid row">
<div class="col-md-12 text-center" id="topHeader">
<span>Circulation</span>
</div>
<div class="col-md-2">
<div class="menu"><i id="hideSideBar" class="fa fa-close"></i>
<ul class="menuList"><div class="listName">Reports</div>
<li class="path" data-screen="CustomizedCirculationReportsCt/index" id="li_CustomizedReport">Customized Report</li>
<li class="path" data-screen="CustomizedCirculationStatisticsCt/index" id="li_CustomizedReport">Customized Statistics</li>
<li class="hasChildUl" id=""><div class="listName">UserWise Report<i class="fa fa-caret-right"></i></div>
<ul class="menuList">
<li class="path" data-screen="UserWiseCirculationController/AllUserCirculation" id="userWiseCrReport">Circulation Report</li>
<li class="path" data-screen="UserWiseCirculationController/userWiseFineCollection" id="userWiseFineCrReport">Fine Collection Report</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-10 firstChild">
<div class="row">
<p>Web pages goes here</p>
</div>
</div>
<!-----Footer will come here ----->
Image :

Updated Answer
I found a nice article on Popping out of hidden overflows that seems to address the issue.
The problem is due to non-obvious behaviour of the combined overflow properties and nested view hierarchies from position: absolute/relative/fixed.
You need a non-overflowing parent element that acts as the positioning anchor for the sub-menus. I tried to strip down your example to the neccessary parts:
.menu {
position: fixed;
}
ul {
list-style-type: none;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px dashed #ccc;
}
.menu ul li {
/*
this seems to be the problematic property
position: relative;
*/
}
.menu ul ul {
transition: all 0.3s;
opacity: 0;
position: absolute;
left: 80%;
background: red;
}
.menu ul li:hover {
background-color: #cccccc;
}
.menu ul li:hover > ul {
opacity: 1;
z-index: 10;
}
<div class="menu">
<ul>
<li>Customized Report
<ul>
<li>Circulation Report</li>
<li>Fine Collection Report</li>
</ul></li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>UserWise Report
<ul>
<li>Circulation Report</li>
<li>Fine Collection Report</li>
</ul>
</li>
</ul>
</div>
But there is a problem with the positioning of the submenu which can be addressed with javascript. Check the article for a better explanation.
Personally I always try to avoid nested scrolling whereever I can. I suggest that you evaluate the possibility of scrolling the whole page when the menu grows. Also, I'd not rely on submenus that are shown by :hover or mouseover because they are not available on touch-controlled browsers.
Original Answer
In the CSS, the menu has set its horizontal overflow to hidden. The Popup-Menu will show up when you remove the overflow properties:
.menu {
height: 100%;
width:16.16% !important;
position: fixed;
z-index: 1000;
left: 0;
/*
Remove this props
overflow-x: hidden;
overflow-y: auto;
*/
padding-bottom: 10%;
background-color: white;
border-right:2px solid #f1f1f1;
}
It works when you remove those lines from your example code.

Vertical Tabs using JQuery

I am trying to implement vertical tabs using JQuery. I have been able to create vertical tabs as I require but the content which I want to show for each tab is all getting displayed in one tab only. Here is the fiddle I have created -
https://jsfiddle.net/z5uq0ppd/
The code is as such -
$(function() {
$("#Configuration").tabs();
});
.side-tabs {
float: left;
width: 20%;
height: 100%;
border: 1px solid black;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.side-tabs:after {
display: block;
clear: both;
content: '';
background-color: #333;
}
.side-tabs li {
float: left;
}
.side-tabs a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.side-tabs a:hover {
background-color: #4CAF50;
}
<div id="Configuration" style="width:100%;height:100%">
<div class="side-tabs">
<ul>
<li class="active" id="09">Home</li>
<li id="10">Add Channel</li>
<li id="11">Add Device</li>
<li id="12">Add Device Type</li>
<li id="13">Display Device Tree</li>
</ul>
</div>
<div style="float:right;width:78%;height:100%; border:1px solid black;">
<div id="ConfigurationPage" style="padding:10px; width:100%; height:100%;">Welcome to Configurations.</div>
<div id="addDevicePage" style="padding:10px; width:100%; height:100%;">Add Device Page.</div>
<div id="addChannelPage" style="padding:10px; width:100%; height:100%;">Add Channel Page.</div>
<div id="addDeviceTypePage" style="padding:10px; width:100%; height:100%;">Add Device Type page.</div>
<div id="DisplayDeviceTreePage" style="padding:10px; width:100%; height:100%;">Device Tree</div>
</div>
</div>
I have implemented horizontal tabs successfully and was doing verticals the same way. However, it doesn't seem to work.

Why does the dropdown menu animation cut the height when you hover again?

I've recently implemented this HTML, CSS and jQuery code from MegaDrop. Like any dropdown menu, it's supposed to show all the links when you hover over it.
Please hover on Products to see the result.
The problem starts when you hover away and when you hover again before the animation is finished, it will cut the height and remembers that. It will also not respond after you hover on and off a couple of times. Which is odd.
I've set no height in the container. I just let it render natively since the links have padding.
The container has overlay: hidden as well.
To enable the jQuery animation I need to remove display: block from .nav > li:hover > div
My question is, how do I prevent this? Do I need to give more instructions to the jQuery itself in order to retain the height of the container and not to shorten it?
This is the site:
http://planet.nu/dev/test/index.html
Here are my HTML, CSS and Javascript:
$(function(){
$('.animated > li').hover(function(){
$(this).find('div[class^="container-"]').stop().slideDown('fast');
},
function(){
$(this).find('div[class^="container-"]').stop().slideUp('slow');
});
});
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}
body { font-family: "PT Sans", sans-serif; background: #f5f5f5; font-size: 100%;}
a { color: #666; text-decoration: none;}
.nav {
background: #666;
border-radius: 3px;
width: 960px;
margin: 20px auto;
height: 43px;
}
.nav li { list-style: none; }
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 43px;
padding: 0 20px;
border-right: 1px solid #777;
border-left: 1px solid #555;
height: 43px;
}
.nav > li:hover > a { background: #555; border-right: 1px solid #666; }
.nav > li:first-child > a { border-left: 0; }
.nav > li:last-child > a { border-right: 0; }
.nav > li:hover > div { }
/* MEGA DROP DOWN */
.nav > li > div {
position: absolute;
left: 0;
top: 43px;
display: none;
background: #fff;
padding: 10px 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.nav > li > div p { color: #666; }
.nav > li > div.right { right: 0; left: auto }
.container-1, .container-2, .container-3, .container-4 { font-size: 80%; }
/* COLUMNS */
.col1,.col2,.col3,.col4,.col5 { margin: 10px 0; float: left; padding: 0 10px;}
/* 1 Column */
.container-1 { width: 170px; }
.container-1 .col1 { width: 100%; }
/* 2 Column */
.container-2 { width: 270px; }
.container-2 .col1 { width: 50% }
.container-2 .col2 { width: 100% }
/* 3 Column */
.container-3 { width: 400px; }
.container-3 .col1 { width: 33.33% }
.container-3 .col2 { width: 66.66% }
.container-3 .col3 { width: 100% }
/* 4 Column */
.container-4 { width: 500px; }
.container-4 .col1 { width: 25%; }
.container-4 .col2 { width: 50% }
.container-4 .col3 { width: 75% }
.container-4 .col4 { width: 100% }
/* 5 Column */
.container-5 { width: 600px; }
.container-5 .col1 { width: 20%; }
.container-5 .col2 { width: 40% }
.container-5 .col3 { width: 60% }
.container-5 .col4 { width: 80% }
.container-5 .col5 { width: 100% }
/* HIGHLIGHTS */
.container-3 .highlighted {
width: 400px;
margin-left: -20px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.container-4 .highlighted {
width: 500px;
margin-left: -10px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mega Drop Down</title>
<link rel="stylesheet" href="css/megadrop.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<ul class="nav clearfix animated">
<li>Home</li>
<li>
Products
<div class="container-4">
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col4">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
</div>
</li>
<li>Blog</li>
<li>Donate</li>
<li>
About
<div class="container-1 right">
<ul>
<li>Who We Are</li>
<li>Why We Care</li>
<li>Some other page</li>
<li>How We Work</li>
</ul>
</div>
</li>
<li>Locations</li>
<li>Contact Us</li>
</ul>
</body>
</html>

Ah! Looks like animate leaves some residual values in your div when its interrupted (inspections using firebug clearly shows this). Clearing it up before you start the animation should fix it.
$(this).find('div[class^="container-"]').attr("style","").stop().slideDown('fast');
$(function(){
$('.animated > li').hover(function(){
$(this).find('div[class^="container-"]').attr("style","").stop().slideDown('fast');
},
function(){
$(this).find('div[class^="container-"]').stop().slideUp('slow');
});
});
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}
body { font-family: "PT Sans", sans-serif; background: #f5f5f5; font-size: 100%;}
a { color: #666; text-decoration: none;}
.nav {
background: #666;
border-radius: 3px;
width: 960px;
margin: 20px auto;
height: 43px;
}
.nav li { list-style: none; }
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 43px;
padding: 0 20px;
border-right: 1px solid #777;
border-left: 1px solid #555;
height: 43px;
}
.nav > li:hover > a { background: #555; border-right: 1px solid #666; }
.nav > li:first-child > a { border-left: 0; }
.nav > li:last-child > a { border-right: 0; }
.nav > li:hover > div { }
/* MEGA DROP DOWN */
.nav > li > div {
position: absolute;
left: 0;
top: 43px;
display: none;
background: #fff;
padding: 10px 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.nav > li > div p { color: #666; }
.nav > li > div.right { right: 0; left: auto }
.container-1, .container-2, .container-3, .container-4 { font-size: 80%; }
/* COLUMNS */
.col1,.col2,.col3,.col4,.col5 { margin: 10px 0; float: left; padding: 0 10px;}
/* 1 Column */
.container-1 { width: 170px; }
.container-1 .col1 { width: 100%; }
/* 2 Column */
.container-2 { width: 270px; }
.container-2 .col1 { width: 50% }
.container-2 .col2 { width: 100% }
/* 3 Column */
.container-3 { width: 400px; }
.container-3 .col1 { width: 33.33% }
.container-3 .col2 { width: 66.66% }
.container-3 .col3 { width: 100% }
/* 4 Column */
.container-4 { width: 500px; }
.container-4 .col1 { width: 25%; }
.container-4 .col2 { width: 50% }
.container-4 .col3 { width: 75% }
.container-4 .col4 { width: 100% }
/* 5 Column */
.container-5 { width: 600px; }
.container-5 .col1 { width: 20%; }
.container-5 .col2 { width: 40% }
.container-5 .col3 { width: 60% }
.container-5 .col4 { width: 80% }
.container-5 .col5 { width: 100% }
/* HIGHLIGHTS */
.container-3 .highlighted {
width: 400px;
margin-left: -20px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.container-4 .highlighted {
width: 500px;
margin-left: -10px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mega Drop Down</title>
<link rel="stylesheet" href="css/megadrop.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<ul class="nav clearfix animated">
<li>Home</li>
<li>
Products
<div class="container-4">
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col4">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
</div>
</li>
<li>Blog</li>
<li>Donate</li>
<li>
About
<div class="container-1 right">
<ul>
<li>Who We Are</li>
<li>Why We Care</li>
<li>Some other page</li>
<li>How We Work</li>
</ul>
</div>
</li>
<li>Locations</li>
<li>Contact Us</li>
</ul>
</body>
</html>

I don't know enough about JavaScript to explain the intricate details, but you have to pass parameters to the stop() method to make the previous animation complete.
$(function(){
$('.animated > li').hover(function(){
$(this).find('div[class^="container-"]').stop(null, true).slideDown('fast');
},
function(){
$(this).find('div[class^="container-"]').stop().slideUp('slow');
});
});

How can i auto adjust the height of my div based on image Size

This is the Jsfiddle to my problem.
Basically i have a display on my website that show some images with text below it. The issue i have is the text under the images is too far from the images itself and not aligned.
The images are not of static height. The width is always 80 px, but the height varies from 80px to 150px and
As you can see the images appear disaligned. All i want to do is have the text below the images in a single line under the image with the most height.
HTML
<ul class="list-items list-carousel no-js">
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<img src="http://lorempixel.com/80/100/sports" />
</div>
<div>SPORTS</div>
</li>
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<img src="http://lorempixel.com/80/140/fashion" />
</div>
<div>FASHION</div>
</li>
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<img src="http://lorempixel.com/80/120/animals" />
</div>
<div>ANIMALS</div>
</li>
</ul>
CSS
ul {
list-style: none;
padding: 0;
margin: 0 0 10px 25px;
}
.ccarousel-item {
float: left;
overflow: hidden;
display: inline-block;
zoom: 1;
margin: 0;
padding: 0;
}
.pImgContainer {
height: auto;
width: 120px;
line-height: 110px;
padding-top: 10px;
margin: 0 auto;
}
EDIT: I have changed my HTML a bit. i made a mistake while reproducing my code in the Fiddle

http://jsfiddle.net/27yj94v8/1/
ul{list-style:none;padding:0;margin:0 0 10px 25px;}
.ccarousel-item{float:left;overflow:hidden;display:inline-block;zoom:1;margin:0;padding:0;}
.pImgContainer{height:auto;width:120px;padding-top:10px;margin:0 auto;}
img+div{margin:0;padding:0;display:block;}

For a start
.pImgContainer div{
bottom:0;
position:absolute;
}
.
JSFIDDLE
For an even better experience, set
.ccarousel-item {
position:relative;
float: left;
display: inline-block;
zoom: 1;
margin: 0;
padding: 0;
}
.pImgContainer {
height:150px;
width: 120px;
line-height:110px;
padding-top: 10px;
margin: 0 auto;
}
.pImgContainer + div{
bottom:-15px;
position:absolute;
}
.
JSFIDDLE

The Problem is in css:
.pImgContainer {
height: auto;
width: 120px;
line-height: 110px; //Remove the line-height.
padding-top: 10px;
margin: 0 auto;
}

Just simply give the .pImgContainer a height of 150px since you know that's the highest value you will ever have.
http://jsfiddle.net/27yj94v8/9/
.pImgContainer {
height:auto;
width: 120px;
line-height:110px;
padding-top: 10px;
margin: 0 auto;
height:150px;
}

Move the caption div out of div.pImgContainer.
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<img src="http://lorempixel.com/80/100/sports" />
</div>
<div>SPORTS</div>
</li>
And add the image container's min height (or just height) in your css:
.pImgContainer{
min-height:150px;//the maximum height a picture could be
}

Try the below mod
http://jsfiddle.net/t0o5gy5v/
<ul class="list-items list-carousel no-js">
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<div class="image-box"> <img src="http://lorempixel.com/80/100/sports" /></div>
<div>SPORTS<div>
</div>
</li>
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<div class="image-box"><img src="http://lorempixel.com/80/140/fashion" /></div>
<div>FASHION</div>
</div>
</li>
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<div class="image-box"> <img src="http://lorempixel.com/80/120/animals" /></div>
<div>ANIMALS</div>
</div>
</li>
ul { list-style: none; padding: 0; margin: 0 0 10px 25px; } .ccarousel-item { float: left; overflow: hidden; display: inline-block; zoom: 1; margin: 0; padding: 0; } .pImgContainer { height: auto; width: 120px; line-height: 110px; padding-top: 10px; margin: 0 auto; } .pImgContainer div { line-height:20px; }
.pImgContainer .image-box { height:150px; }