CODEWITHSUNDEEP
csshtml
user1860288
user1860288

Reputation: 532

HTML5 - how to align two canvases of different heights at the top?

I have two canvases inside one <div>. They are different heights and appear to be aligned at the bottom

          +-------+
          +       +
+-------+ +       +
+       + +       +
+-------+ +-------+

How do I make them look like

+-------+ +-------+
+       + +       +
+-------+ +       +
          +       +
          +-------+

I could make them the same height. But on a narrow-width display where they are vertically stacked, there would be extra space between the two canvases.

Upvotes: 2

Views: 2407

Answers (3)

Tiberiu C.
Tiberiu C.

Reputation: 3513

float is a solution, vertical-align with inline-block is the other (but note the space between them).

Example :

.container {
  border : 1px solid red;
}

.container > * {
  display: inline-block;
  vertical-align: top;
  border: 1px solid blue; /* debug purposes */
}
<div class="container">
  <canvas width="200" height="40"></canvas>
  <canvas width="200" height="100"></canvas>
</div>

Upvotes: 3

Paul Roub
Paul Roub

Reputation: 36448

They're lining up on the same baseline because they are inline elements. Make them block elements (like div, p, etc.) and float them.

On narrow screens, they'll still stack up as expected.

canvas {
  /* for display purposes */
  border: 1px solid red;

  display: block;
  float: left;
}

.container {
  /* for display purposes */
  border: 1px solid blue;

  /* make sure we contain the floats */
  overflow: auto;
}
<div class="container">
  <canvas style="width: 80px; height: 50px"></canvas>

  <canvas style="width: 80px; height: 100px"></canvas>
</div>

Upvotes: 2

odedta
odedta

Reputation: 2478

canvas {
    display:inline-block; 
    vertical-align: top;
}

Please note that the use of vertical-align is dependent of the display property.

Upvotes: 1

Related Questions