Content positioning with CSS

Question

I am creating a website template. I am running into a problem positioning 3 individual columns that have blocks of content being displayed. My goal is for each columns first block of content to be displayed from the top of there respective positions.

To try to be more clear. I want each block of content in each column to start on the same top line, then extend down for as far as desired. But right now only the middle block of content in the middle column is being displayed at the top line, and because it is longer than the other 2 columns they are aligning to its bottom line.

.main {
  display: block;
  position: relative;
  width: 1181px;
  margin: 0 auto;
  padding: 0 auto;
}
.col-one,
.col-two,
.col-three {
  display: inline-block;
  position: relative;
  margin-top: 50px;
}
.col-block-one,
.col-block-two,
.col-block-three {
  display: block;
  position: relative;
  background-color: white;
  width: 360px;
  margin-left: 15px;
  margin-right: 15px;
}
.col-one-title,
.col-two-title,
.col-three-title {
  display: block;
  position: relative;
  font-size: 24px;
  font-weight: 500;
  padding: 24px;
}
.col-one-content,
.col-two-content,
.col-three-content {
  display: block;
  position: relative;
  font-size: 18px;
  padding-right: 24px;
  padding-left: 24px;
  padding-bottom: 24px;
}

<div class="main">
  <div class="col-one">
    <div class="col-block-one">
      <p class="col-one-title">HTML Introduction, What is HTML</p>
      <p class="col-one-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-one -->
  </div>
  <!-- end of col-one -->
  <div class="col-two">
    <div class="col-block-two">
      <p class="col-two-title">HTML Introduction, What is HTML</p>
      <p class="col-two-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages. HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages. HTML is a Hypertext
        Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-two -->
  </div>
  <!-- end of col-two -->
  <div class="col-three">
    <div class="col-block-three">
      <p class="col-three-title">HTML Introduction, What is HTML</p>
      <p class="col-three-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-three -->
  </div>
  <!-- end of col-three -->
</div>
<!-- end of main -->

score 1 · Answer 1 · answered Dec 28 '15 at 20:02

Using

.col-one, .col-two, .col-three {
  vertical-align: top;

will solve your problem, it makes sure the content is aligned at the top line:

.main {
  display: block;
  position: relative;
  width: 1181px;
  margin: 0 auto;
  padding: 0 auto;
}
.col-one,
.col-two,
.col-three {
  vertical-align: top;
  display: inline-block;
  position: relative;
  margin-top: 50px;
}
.col-block-one,
.col-block-two,
.col-block-three {  
  display: block;
  position: relative;
  background-color: white;
  width: 360px;
  margin-left: 15px;
  margin-right: 15px;
}
.col-one-title,
.col-two-title,
.col-three-title {
  display: block;
  position: relative;
  font-size: 24px;
  font-weight: 500;
  padding: 24px;
}
.col-one-content,
.col-two-content,
.col-three-content {
  display: block;
  position: relative;
  font-size: 18px;
  padding-right: 24px;
  padding-left: 24px;
  padding-bottom: 24px;
}

<div class="main">
  <div class="col-one">
    <div class="col-block-one">
      <p class="col-one-title">HTML Introduction, What is HTML</p>
      <p class="col-one-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-one -->
  </div>
  <!-- end of col-one -->
  <div class="col-two">
    <div class="col-block-two">
      <p class="col-two-title">HTML Introduction, What is HTML</p>
      <p class="col-two-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages. HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages. HTML is a Hypertext
        Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-two -->
  </div>
  <!-- end of col-two -->
  <div class="col-three">
    <div class="col-block-three">
      <p class="col-three-title">HTML Introduction, What is HTML</p>
      <p class="col-three-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-three -->
  </div>
  <!-- end of col-three -->
</div>
<!-- end of main -->

score 1 · Answer 2 · answered Dec 28 '15 at 20:03

1

`vertical-align: top`

.col-one, .col-two, .col-three {
    …
    vertical-align: top;
}

answered Dec 28 '15 at 20:03

gfullam

11,531
5
50
64

score 0 · Answer 3 · answered Dec 28 '15 at 20:06

0

Add vertical-align to your css (.col-one,.col-two,.col-three)

.col-one,
.col-two,
.col-three {
  display: inline-block;
  position: relative;
  margin-top: 50px;
  vertical-align:top; 
}

answered Dec 28 '15 at 20:06

muzazu

108
6

Content positioning with CSS

3 Answers3

vertical-align: top

`vertical-align: top`