How to make the second column a little bit lower

Question

I want this 2 columns:

this is how it looks like now at the same height.

This is how I wanted it to be: .

This is my code:

html {
  background-color: lightblue;
  font-family: Tahoma, Geneva, sans-serif;
  margin: 0 auto;
}

#service {
  padding-top: 40;
  margin-left: 40;
  height: 600px;
  width: 100%;
  margin: 0px auto;
  margin-bottom: 50;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

#service .service {
  Margin-left: 30;
  color: #c0392b;
  font-size: 45;
}

#service .service_txt {
  margin-left: 30;
  margin-right: 50;
  color: #fff;
  top: 190%
}

<div id="service">
  <p class="service">service</P>
  <p class="service_txt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
    Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
  </p>
  <p><img class="service_img" src="img/service.jpg"></p>
</div>

just set `width:100%` on `.service` and move it outside of `#service` https://jsfiddle.net/u6dfs1b7/ — Grasper, Jul 26 '17 at 14:39
When you inspect the element `.service` and view its computed styles, or box model, what do you see? — UncaughtTypeError, Jul 26 '17 at 14:41
Yes, it would be awesome indeed if people worked for you for free. But asking for it is not as awesome. On [so], your focus should be set on how you could help others, not how others can help you. How? Simple: formulate your question in a way that answers to it would be useful for people with the same type of problem. And you'll get answers. What have you tried so far? — tao, Jul 26 '17 at 14:44
You use flex instead column css , column css is still at experimental level and won't evolve much if it doesn't diseappear. flex & grid are much more efficient — G-Cyrillus, Jul 26 '17 at 18:44

msanford · Accepted Answer · 2017-07-26T14:52:13.450

I assume the intent is to align the top of the two columns of text?

Take the header <p> out of the reflow columns: that way it will take the same width as the text and both text columns will start at the same height. You also need to adjust the margins.

You have another problem, though: you're missing a lot of units: margin: 40 is not a thing in CSS, you need to specify 40 what (px, em, %, etc). The only exception to this is 0 (since if the value is 0, you don't care what the unit is).

Also, your naming scheme is complicated. Don't do this: #service .service, call it something more semantic, and probably don't use the id attribute at all.

html {
  background-color: lightblue;
  font-family: Tahoma, Geneva, sans-serif;
  margin: 0 auto;
}

.wrapper {
  margin-left: 40px;
  height: 600px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

.title {
  margin-left: 30px;
  color: #c0392b;
  font-size: 45px;
}

.wrapper .text {
  margin-top: 0; /*Add this or your first columns will start below the second*/
  margin-left: 30px;
  margin-right: 50px;
  color: #fff;
  /*top: 190% This does nothing useful*/
}

<p class="title">service</p> <!-- Move this outside the service div -->
<div class="wrapper">
  <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
    Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
  </p>
  <p><img class="service_img" src="img/service.jpg"></p>
</div>

score 0 · Answer 2 · answered Jul 26 '17 at 14:46

Set the columns property to the text container, like so:

html {
  background-color: lightblue;
  font-family: Tahoma, Geneva, sans-serif;
  margin: 0 auto;
}

#service {
  padding-top: 40;
  margin-left: 40;
  height: 600px;
  width: 100%;
  margin: 0px auto;
  margin-bottom: 50;
  
}

#service .service {
  Margin-left: 30;
  color: #c0392b;
  font-size: 45;
  display: inline-block;
  width: 100%;
  
}

#service .service_txt {
  margin-left: 30;
  margin-right: 50;
  color: #fff;
  top: 190%
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
.service_img {
display: block;
margin: 10px 0px;
}

<div id="service">
  <p class="service">service</P>
  <p class="service_txt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
    Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
    <img class="service_img" src="http://fakeimg.pl/250x100/">
  </p>
  
</div>

How to make the second column a little bit lower

2 Answers2