CODEWITHSUNDEEP
htmlcss
ketan
ketan

Reputation: 19341

Wrap vertically like a column in HTML

I am using Div base Submenu on my site. I like to wrap vertically with a fixed-height sub menu.

I create a menu and sub menu using div. I don't want to use Ul,li. My structure is like...

<div class='submenu">
    <div class="menu"><span>item1<span></div>
    <div class="menu"><span>item2<span></div>
    <div class="menu"><span>item3<span></div>
    <div class="menu"><span>item4<span></div>
    <div class="menu"><span>item5<span></div>
    <div class="menu"><span>item6<span></div>
    <div class="menu"><span>item7<span></div>
    <div class="menu"><span>item8<span></div>
    <div class="menu"><span>item9<span></div>
    <div class="menu"><span>item10<span></div>
</div>

Now when I run this code and hover on menu then submenu must display like:

item1   item6
item2   item7
item3   item8
item4   item9
item5   item10

When the height of submenu height is fixed like 200px, the number of submenu dynamic will be 10 or 15 or anything. I need it using CSS.

Upvotes: 4

Views: 2638

Answers (3)

Coder_Naveed
Coder_Naveed

Reputation: 576

yes you can use CSS like this

.submenu {

max-height: 200px;
column-count: 2;
column-gap: 10px;

}

display: table-cell can also be used, but the width cannot be changed if only one column is present (what I have experienced)

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Used to Css3 Property column-count

as like this 

.submenu {
  -webkit-column-count: 2;
  -webkit-column-gap:   20px;  
  -moz-column-count:    2;
  -moz-column-gap:      20px;
  column-count:         2;
  column-gap:           20px;
}

Demo

Demo-2

Upvotes: 5

JunM
JunM

Reputation: 7150

You can use CSS3 column-count Property and you may add display: table-cell; also

Check this fiddle

    .submenu {
        max-height: 200px;
        column-count:2;
        -moz-column-count:2;  /* Firefox */
        -webkit-column-count:2;  /* Safari and Chrome */
        display: table-cell;
}

Upvotes: 1

Related Questions