Move a div up in its container

Question

When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?

See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em

Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)

.container {
  background-color: blue;
  width: 700px;
  height: auto;
}

.small {
  width: 200px;
  height: 200px;
  display: inline-block;
  background-color: red;
}

.big {
  height: 400px;
  width: 400px;
  display: inline-block;
  background-color: green;
}

<div class=container>
  <div class=small></div>
  <div class=big></div>
</div>

The space comes from because they are inline blocks, as they are both inline block, any white space between the elements (up to one character) will be shown. Think of each element like a word in a sentence, if you have space between them, it is shown. Staying on that analagy, your words are vertically aligned to the baseline by default so to move the red box to the top, use vertical align top on the parent container — Pete, Dec 21 '18 at 17:45
just add the display flex or inline-flex to container remove all inlineblock the space is from inline block — godfather, Dec 21 '18 at 17:48
So what's the option if you want to keep your indents and/or line breaks so your html stays readable? — Oleg, Dec 21 '18 at 17:53

score 1 · Answer 1 · answered Dec 21 '18 at 17:53

vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;

As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.

.container {
  background-color: blue;
  width: 700px;
  height: auto;
}

.small {
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: top;
  background-color: red;
}

.big {
  height: 400px;
  width: 400px;
  display: inline-block;
  vertical-align: top;
  background-color: green;
}

<div class=container>
  <div class=small></div><div class=big></div>
</div>

score 0 · Answer 2 · answered Dec 21 '18 at 17:42

The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.

.container {
    background-color:blue;
    width: 700px;
    height: auto;
    display: flex;
    align-items: flex-start;
}

.small {
    width:200px;
    height:200px;
    display:inline-block;
    background-color:red;
}

.big {
    height: 400px;
    width:400px;
    display:inline-block;
    background-color:green;
}

<div class=container>
    <div class=small></div>
    <div class=big></div>
</div>

Okba · Answer 3 · 2018-12-24T16:46:05.433

Just add vertical-align: top; to both elements.

Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:

.container{ 
    font-size: 0;
}

And don't forget to set the right font size to the child elements if you're going to add some text to them, example :

.small, .big{
    font-size: 16px;
}

score 0 · Answer 4 · answered Dec 21 '18 at 17:50

There may be a better solution out there, but if you float each element left it will give you your desired output.

.container {
  background-color: blue;
  width: 700px;
  height: auto;
}

.small {
  width: 200px;
  height: 200px;
  display: inline-block;
  background-color: red;
}

.big {
  height: 400px;
  width: 400px;
  display: inline-block;
  background-color: green;
}
.left{
  float: left
}

<div class="container left">
  <div class="small left"></div>
  <div class="big left"></div>
</div>

Move a div up in its container

4 Answers4