Arranging Multiple divs having dynamic content using css

Question

I want to know how can i arrange divs which has dynamic content

Html code structure

<div id="megamenu1" class="megamenu">


<div class="column">
 <h3>News Related</h3>
 <ul>
 <li><a href=link>CNN</a></li>
 <li><a href=link>CNN</a></li>
 <li><a href=link>CNN</a></li>
 <li><a href=link>CNN</a></li>
 <li><a href=link>CNN</a></li>
 <li><a href=link>CNN</a></li>
 </ul>
</div>

<div class="column">
 <h3>Technology</h3>
 <ul>
 <li><a href=link>lllNN</a></li>
 <li><a href=link>CNxcN</a></li>
 <li><a href=link>CNxzczN</a></li>
 </ul>
</div>

</div>

CSS

.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: white;
border: 1px solid #f06b24;
border-width: 5px 1px;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;

}

.megamenu .column{

        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;

}

.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.megamenu .column ul li{
padding-bottom: 5px;
}

.megamenu .column h3{
background: #e0e0e0;
font: bold 13px Arial;
margin: 0 0 5px 0;
}

.megamenu .column ul li a{
text-decoration: none;
}

.megamenu .column ul li a:hover{
color: red;
}

How can arrange the divs so that no space is between the divs
the number of divs can increase or decrease
the content in the div may increase or decrease
can it be achieved only by using css ,ies with out using http://masonry.desandro.com/

It sounds like a masonry style layout is precisely what you're looking for. Otherwise you could experiment with CSS flex, but I don't think it's going to handle both the vertical and horizontal effect you are seeking. — benjarwar, Aug 06 '15 at 20:47
I am sure you can Google this issue or try this approach: http://jsfiddle.net/gabrieleromanato/tQANc/ — Blix, Aug 06 '15 at 20:48
possible duplicate of [Horizontal masonry layout with flexbox CSS only](http://stackoverflow.com/questions/28681572/horizontal-masonry-layout-with-flexbox-css-only) — benjarwar, Aug 06 '15 at 20:49

score 0 · Answer 1 · answered Aug 07 '15 at 06:57

I think, I got you just try this one as per your requirement I've done like this..

.megamenu{
 position: absolute;
 left: 0;
 top: 0;
 background: white;
 border: 1px solid #f06b24;
 border-width: 5px 1px;
 padding: 10px;
 font: normal 12px Verdana;
 z-index: 100;
 
 }
 
 .megamenu .column{
 
         width: 200px;
         min-height: 250px;
         border: 1px solid #000;
         display: -moz-inline-stack;
         display: inline-block;
         vertical-align: top;
         margin: 5px;
         zoom: 1;
   float: left;
        
 
 }
 
 .megamenu .column ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 
 .megamenu .column ul li{
 padding-bottom: 5px;
 }
 
 .megamenu .column h3{
 background: #e0e0e0;
 font: bold 13px Arial;
 margin: 0 0 5px 0;
 }
 
 .megamenu .column ul li a{
 text-decoration: none;
 }
 
 .megamenu .column ul li a:hover{
 color: red;
 }

<div id="megamenu1" class="megamenu">


       <div class="column">
            <h3>News Related</h3>
            <ul>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a>
            </li><li><a href=link>CNN</a></li><li><a href=link>CNN</a></li><li><a href=link>CNN</a></li><li><a href=link>CNN</a></li>
            
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
        
            <li><a href=link>CNN</a></li><li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            <li><a href=link>CNN</a></li>
            </ul>
        </div>
        
        <div class="column">
            <h3>Technology</h3>
            <ul>
            <li><a href=link>lllNN</a></li>
            <li><a href=link>CNxcN</a></li>
            <li><a href=link>CNxzczN</a></li>
            </ul>
        </div>
         
         
          <div class="column">
            <h3>Technology2</h3>
            <ul>
            <li><a href=link>lllNN</a></li>
            <li><a href=link>CNxcN</a></li>
            <li><a href=link>CNxzczN</a></li>
            </ul>
        </div>
        
        
        <div class="column">
            <h3>Technology3</h3>
            <ul>
            <li><a href=link>lllNN</a></li>
            <li><a href=link>CNxcN</a></li>
            <li><a href=link>CNxzczN</a></li>
            </ul>
        </div>
        
         <div class="column">
            <h3>Technology4</h3>
            <ul>
            <li><a href=link>lllNN</a></li>
            <li><a href=link>CNxcN</a></li>
            <li><a href=link>CNxzczN</a></li>
            </ul>
        </div>
         <div class="column">
            <h3>Technology5</h3>
            <ul>
            <li><a href=link>lllNN</a></li>
            <li><a href=link>CNxcN</a></li>
            <li><a href=link>CNxzczN</a></li>
            </ul>
        </div>
         <div class="column">
            <h3>Technology6</h3>
            <ul>
            <li><a href=link>lllNN</a></li>
            <li><a href=link>CNxcN</a></li>
            <li><a href=link>CNxzczN</a></li>
            </ul>
        </div>
 
</div>

@nikihil.nj the height is fixed right so it wont solve my issue as the content will vary and the number of column div also will vary.. — SRDP, Aug 07 '15 at 07:14

Arranging Multiple divs having dynamic content using css

1 Answers1