Getting Divs to Top-Align Inside a Div

Question

I have three divs with ids red green and blue inside another div with id pink. What I expect is red, green, and blue would all be justified to the top of pink. I also expect that the width of each would be equal to the width of the widest child element inside it. But what is happening is they are aligned to the bottom of pink. In addition, as children are added to one of them, its width grows as well as its height, increasing pink's width and height.

My question is three-fold. First, why are red, green, and blue not aligned to the top of pink; or more precisely why are they aligned to the bottom of pink? Second, why does the width of red green or blue increase as I add children to it -- even though the children are arranged vertically? And finally, what must I change for red green and blue to align to the top of pink and for the width of each to be equal to the width of its widest child? I tried to be clear on my question so please forgive me if I come up short.

<style>
    .menu {
        position: absolute;
        left: 10px;
        top: 30px;
        border-radius: 3px;
        background-color: lightgoldenrodyellow;
        z-index: 5000;
    }
    .subMenu {
        position: relative;
        display: inline-block;
    }
    .subMenuHead {
        display: inline-block;
        width: 100%;
        font-weight: bold;
        text-align: center;
    }
    .subMenuOption {
        display: inline-block;
        width: 100%;
        color: darkblue;
        font-size: 16px;
        white-space: nowrap;
    }
</style>



<div id="menu" class="menu">
    <div id="pink" style="background-color:pink;">
        <div id="red" class="subMenu" style="background-color:red;">
            <span class="subMenuHead">Project</span>
            <span class="subMenuOption">New...</span>
        </div>
        <div id="green" class="subMenu" style="background-color:green;">
            <span class="subMenuHead">Upload Data</span>

        </div>
        <div id="blue" class="subMenu" style="background-color:blue;">
            <span class="subMenuHead">Account</span>
        </div>

    </div>
</div>

Any insights are appreciated.

Answer 1

1. Why are the red, green, and blue blocks aligned to the bottom of pink?

These containers are aligned to the bottom of their parent because they are inline-blocks and inline-block's behavior is similar to a plain text's one. You see, if I write a text "LiKe tHIs" all the letters are aligned to the baseline which looks like the bottom line (but it is not quite). It will be easier to understand if you imagine that letters are significantly differ in font size.

2. Why does the width of red green or blue increase as I add children to it?

This is rather funny. Normally, you wouldn't use an inline-block container with a 100% width. The parent container is also inline-block which make it calculate it's width relying on it's content. And indeed it's width are equal to total width of all text inside. But since every child have a 100% width they overflow parent container and end up on a next line. After all this calculations browser just don't recalculate the parent's width and you see the result.

3. What must I change for red, green and blue boxes to align them to the top of the pink container?

There are a few ways to achieve it. Tables, float elements etc. I prefer to use a flexbox method when you are not chasing an old device support.

#pink {
     display: flex;
     align-items: flex-start;
   }

   .subMenu {
     display: flex;
     flex-direction: column;
     width: 33.33%;
   }

   .subMenuHead {
     width: 100%;
     font-weight: bold;
     text-align: center;
     white-space: nowrap;
   }

<div id="menu" class="menu">
  <div id="pink" style="background-color:pink;">
    <div id="red" class="subMenu" style="background-color:red;">
      <span class="subMenuHead">Project</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">Text text text text text text text text text text text text text text text</span>
      <span class="subMenuOption">N</span>
    </div>
    <div id="green" class="subMenu" style="background-color:green;">
      <span class="subMenuHead">Upload Data</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">N</span>
    </div>
    <div id="blue" class="subMenu" style="background-color:blue;">
      <span class="subMenuHead">Account</span>
    </div>
  </div>
</div>

Unlike tables, the flexbox model allows the red, green and blue boxes to have a different height. This way it is now exactly as you asked in the question (align them to the top). But if you want to make them equal height - remove align-items: flex-start; or use align-items: stretch; (it's a default).

Answer 2

you try add this code to style

#pink{display: table}
#pink > *{display: table-cell}