Search code examples
csshtmldrop-down-menumegamenu

Adjust div height based on its content

I'm working on building mega menu. I have trouble when arrange div.

Here's the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Mega Menu Layout Test</title>
  <style>
  h1
  {
      margin:0px;
      font-size:16px;
  }

  .wrapper
  {
      position:absolute;
      width:400px;
      background:#CCC;
  }

  .category
  {
    float:left;
    margin:10px;
    width:180px;
  }

  .subcategory
  {

  }
  </style>
 </head>
 <body>
  <div class="wrapper" >
    <div class="category">
        <h1>Lorem Ipsum 1</h1>
    </div>
    <div class="category">
        <h1>Lorem Ipsum 2</h1>
    </div>
    <div class="category">
        <h1>Lorem Ipsum 3</h1>
        <div>
            <a href="#" style="display:block;">Dolor Sit Amet</a>
        </div>
    </div>
    <div class="category">
        <h1>Lorem Ipsum 4</h1>
        <div>
            <a href="#" style="display:block;">Dolor Sit Amet</a>
            <a href="#" style="display:block;">Consectetuer</a>
            <a href="#" style="display:block;">Adipiscing Elit</a>
        </div>
    </div>
    <div class="category">
        <h1>Lorem Ipsum 5</h1>
    </div>
    <div class="category">
        <h1>Lorem Ipsum 6</h1>
        <div>
            <a href="#" style="display:block;">Dolor Sit Amet</a>
            <a href="#" style="display:block;">Phasellus Congue</a>
            <a href="#" style="display:block;">Fringilla Accumsan</a>
            <a href="#" style="display:block;">Praesent aliquam</a>
            <a href="#" style="display:block;">Suspendisse non purus</a>
        </div>
    </div>
    <div class="category">
        <h1>Lorem Ipsum 7</h1>
        <div>
            <a href="#" style="display:block;">Dolor Sit Amet</a>
            <a href="#" style="display:block;">Consectetuer</a>
            <a href="#" style="display:block;">Adipiscing Elit</a>
        </div>
    </div>

    <div class="category">
        <h1>Lorem Ipsum 8</h1>
        <div>
            <a href="#" style="display:block;">Dolor Sit Amet</a>
            <a href="#" style="display:block;">Consectetuer</a>
            <a href="#" style="display:block;">Adipiscing Elit</a>
        </div>
    </div>
  </div>
 </body>
</html>

Produces output like this:

Output

This menu create dynamically so im difficult to set fixed height each div

Is better way How to remove empty space between Lorem Ipsum 3 and Lorem Ipsum 5; Lorem Ipsum 5 and Lorem Ipsum 7 ?

Solution

  • I answer my own question:

    (1) Hard way: use a jQuery Masonry

    (2) Simple way: Add new div for each colum, here the HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Mega Menu Layout</title>
  <style>
  h1
  {
      margin:0px;
      font-size:16px;
  }

  .wrapper
  {
      position:absolute;
      width:400px;
      background:#CCC;
  }

  .category
  {
    float:left;
    margin:10px;
    width:90%;
  }

  .col
  {
      float:left;
      width:45%
  }
  </style>
 </head>
 <body>
  <div class="wrapper" >
        <div class="col">
                <div class="category">
                    <div>
                        <h1>Lorem Ipsum 1</h1>
                    </div>
                </div>
                <div class="category">
                    <div>
                        <h1>Lorem Ipsum 2</h1>
                    </div>
                </div>
                <div class="category">
                    <div>
                    <h1>Lorem Ipsum 3</h1>
                        <a href="#" style="display:block;">Dolor Sit Amet</a>
                    </div>
                </div>
                <div class="category">

                    <div>
                    <h1>Lorem Ipsum 4</h1>
                        <a href="#" style="display:block;">Dolor Sit Amet</a>
                        <a href="#" style="display:block;">Consectetuer</a>
                        <a href="#" style="display:block;">Adipiscing Elit</a>
                    </div>
                </div>
        </div>
        <div class="col">
                <div class="category">
                    <div>
                        <h1>Lorem Ipsum 5</h1>
                    </div>
                </div>
                <div class="category">
                    <div>
                    <h1>Lorem Ipsum 6</h1>
                        <a href="#" style="display:block;">Dolor Sit Amet</a>
                        <a href="#" style="display:block;">Phasellus Congue</a>
                        <a href="#" style="display:block;">Fringilla Accumsan</a>
                        <a href="#" style="display:block;">Praesent aliquam</a>
                        <a href="#" style="display:block;">Suspendisse non purus</a>
                    </div>
                </div>
                <div class="category">
                    <div>
                    <h1>Lorem Ipsum 7</h1>
                        <a href="#" style="display:block;">Dolor Sit Amet</a>
                        <a href="#" style="display:block;">Consectetuer</a>
                        <a href="#" style="display:block;">Adipiscing Elit</a>
                    </div>
                </div>
                <div class="category">
                    <div>
                    <h1>Lorem Ipsum 8</h1>
                        <a href="#" style="display:block;">Dolor Sit Amet</a>
                        <a href="#" style="display:block;">Consectetuer</a>
                        <a href="#" style="display:block;">Adipiscing Elit</a>
                    </div>
                </div>
        </div>
  </div>
 </body>
</html>

    and here the output:

    enter image description here