divide li elements into columns - CSS Design Issue - html

Question

Here is the demo code I have tried to written. Please help me...
#mainContainer {
width: 100%;
height: 100%;
white-space: nowrap;
background: brown;
}
ul {
list-style: none;
}
#mainContainer > ul {
column-count: auto;
-webkit-column-count: auto;
-moz-column-cont: auto;
column-width: 300px;
-webkit-column-width: 300px;
-moz-column-width: 300px;
background: yellow;
}
#mainContainer > ul > li {
display: inline-block;
height: 50px;
}
#id1 li,
#id2 li {
background: blue;
padding: 1%;
border-radius: 5px;
width: 300px;
text-align: center;
margin: 5px 0px;
}
<div id="mainContainer">
<ul>
<li>
<div id="id1">
<h2>Title 1</h2>
<hr/>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
<li>l4</li>
</ul>
</div>
</li>
<li>
<div id="id2">
<h2>Title 2</h2>
<hr/>
<ul>
<li>l5</li>
<li>l6</li>
<li>l7</li>
<li>l8</li>
</ul>
</div>
</li>
</ul>
</div>
I want to have only vertical scrolling so I have made the main container div of infinite width with css white-space attribute.
I want to divide the list elements in proper column as given in figure.

Answer 1

Modify ul css as below:
#mainContainer > ul {
column-count:auto;
-webkit-column-count:auto;
-moz-column-cont:auto;
column-width:300px;
-webkit-column-width:300px;
-moz-column-width:300px;
background:yellow;
white-space:normal; //added
width:100%;//added
}
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/730/

Answer 2

How about this alternativ, without the column count.
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
#main>li {
display: inline-block;
vertical-align: top;
min-width: 300px;
}
#main h2 {
font-size: 1em;
border-bottom: 1px solid black;
}
#main>li>ul {
width: 100%;
}
#main ul li {
display: inline-block;
width: 47%;
margin: 1%;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
text-align: center;
}
<ul id="main">
<li>
<h2>Title 1</h2>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
<li>l4</li>
</ul>
</li>
<li>
<h2>Title 2</h2>
<ul>
<li>l5</li>
<li>l6</li>
<li>l7</li>
<li>l8</li>
</ul>
</li>
</ul>

Answer 3

Demo Code Successfully working
css
.mainContainer-for-features{position:absolute; top:0px; left:0px; right:0px; bottom:0px; background:#000;}
.mainContainer-for-features header{position:fixed; top:0px; left:0px; right:0px; width:100%; height:45px; padding-top:15px; text-align:center; background:rgba(0,0,0,0.8); color:#fff;}
#content-display { position:absolute; top:60px; left:0px; right:0px; bottom:0px; background:#fff; white-space:nowrap; overflow:hidden; overflow-x:auto; padding-left:15px;}
.cols{display:inline-block;}
.blocks{width:400px; height:150px; background:blue; margin:3px;}
html
<div class="mainContainer-for-features" id="ebooks-mainContainer">
<header>Simple CSS Grid</header>
<div id="content-display">
<div style="display:inline-block; background:#fff; padding:10px;">
<h1>Title 1</h1><hr/>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
</div>
<div style="display:inline-block; background:#fff; padding:10px;">
<h1>Title 2</h1><hr/>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
<div class="cols">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
</div>
</div>
</div>