1

Overview

I have two div elements with class col which each have 50% widths.

I'm trying to have them sit next to each other; however, the second element is at the baseline of the first element:

Screenshot Example

Code

NB: the left column has a minimum width of 540px so you may need to preview in full screen mode

div.canvas {
  background-image: url(//www.transparenttextures.com/patterns/asfalt-dark.png);
  padding: 100px 0;
  background-color: #F2E394;
  text-align: center;
}

div.col {
  width: 50%;
  display: inline-block;
}

/* Device Mockups */

div#phone {
  width: 540px;
  height: 540px;
  background: url(//i.imgur.com/ieBaiQ1.png);
  background-size: contain;
  background-position: center center;
  position: relative;
  margin: 0 auto;
}

div#phone div.frame {
  position: absolute;
  top: 85px;
  bottom: 85px;
  left: 165px;
  right: 165px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  background: white;
}
<div class="canvas">
  <div class="col">
    <div id="phone">
      <div class="frame">
      </div>
    </div>
  </div><div class="col ta-l">
    <h1>Header 1</h1>
  </div>
</div>

Question

How can I ensure that the right column is vertically aligned with the left column, with the text "Header 1" starting at the same position as the top of the left column?

Community
  • 1
  • 1
Ben
  • 8,894
  • 7
  • 44
  • 80
  • With `float`, I have difficulty making the elements centered - something achieved by using `inline-block` and adding `text-align: center` to the parent element – Ben Dec 02 '15 at 12:33
  • Really `float` are a bad and old technique. Better inline-block no doubt. – Marcos Pérez Gude Dec 02 '15 at 12:41

3 Answers3

0

Just add vertical-align: top to div.col (by default an inline element has vertical-align set to baseline -- you just need to tell it align to the top instead).

div.canvas {

  background-image: url(//www.transparenttextures.com/patterns/asfalt-dark.png);

  padding: 100px 0;

  background-color: #F2E394;

  text-align: center;

}

div.col {

  width: 50%;

  display: inline-block;

vertical-align: top;

}

/* Device Mockups */

div#phone {

  width: 540px;

  height: 540px;

  background: url(//i.imgur.com/ieBaiQ1.png);

  background-size: contain;

  background-position: center center;

  position: relative;

  margin: 0 auto;

}

div#phone div.frame {

  position: absolute;

  top: 85px;

  bottom: 85px;

  left: 165px;

  right: 165px;

  overflow-x: hidden;

  overflow-y: auto;

  border-radius: 3px;

  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);

  background: white;

}
<div class="canvas">
  <div class="col">
    <div id="phone">
      <div class="frame">
      </div>
    </div>
  </div><div class="col ta-l">
    <h1>Header 1</h1>
  </div>
</div>
Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
0

use vertical align

vertical-align: top;

on your right column

Callam
  • 949
  • 1
  • 14
  • 22
-1

Use this CSS:

.canvas{overflow: hidden;}
.col{float: left;}
Jagdish Parmar
  • 609
  • 5
  • 11
  • Please add some explanation why this would help the OP fix his problem? Or why his problem arises anyway. This answer as such doesn't really help the OP. – giorgio Dec 02 '15 at 12:40
  • @giorgio See example [fiddle](https://jsfiddle.net/afn2105a/) – Jagdish Parmar Dec 02 '15 at 12:46
  • that is a proof of concept. That made me remove the downvote. But you still didn't explain why this works and what he did 'wrong'. So I can still not consider this a good answer. --edit-- I tried to remove my downvote, but SO doesn't let me unless you edit your answer. Which I would advice anyway ;) – giorgio Dec 02 '15 at 12:49
  • @giorgio '.col{float:left;}'
    default width:100% so used float:left for moving the div to near by second div.
     – Jagdish Parmar Dec 02 '15 at 12:53