3

The HTML, CSS is available in the link below.

https://jsfiddle.net/td5ruzh7/6/

I need to utilize the space shown under small sized ul elements and make the ul elements shown below each ul element to move upwards. Please see the screenshots for the current arrangement and the required one below.

Or if you can give me some better option to do so, please let me know.

current arrangement: enter image description here required arrangement: enter image description here

Rajesh Omanakuttan
  • 6,788
  • 7
  • 47
  • 85
  • You can't make it in rows, you need to make it with columns. So category 1 and category 5 will be in the same box (column). This have so many problems, specially to construct an html layout without brokenbrain. – Marcos Pérez Gude Sep 16 '15 at 10:25

1 Answers1

1

If you always have four categorys in one row, try this:

  <div>
        <div class="col">
            <ul>
              <li> <label> Category 1</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>    
            <ul>
              <li> <label> Category 5</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 9</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
        </div>
        <div class="col">
            <ul>
              <li> <label> Category 2</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 6</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 10</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
        </div>
        <div class="col">
            <ul>
              <li> <label> Category 3</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 7</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 11</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
        </div>
        <div class="col">
            <ul>
              <li> <label> Category 4</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 8</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 12</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
        </div>
    </div>

CSS:

div div.col {
    float: left;
}
ul {
    list-style-type: none;
    border: 1px solid red;
}
Sim
  • 3,279
  • 1
  • 17
  • 23