CODEWITHSUNDEEP
htmlcss
cygnus
cygnus

Reputation: 149

Properly align content in columns

That's a layout with which I'm currently dealing.

enter image description here

I don't have some consistent thoughts about how to properly align content in such columns. Paragraphs always shifted, also height of columns isn't full, guess that I'm missing something. Here is what do I have so far https://jsfiddle.net/scmk01jr/.

html, body, .container {
  height: 100%;
}

.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0;
    box-sizing: border-box;
}

.height-100 {
  height: 100%;
  display: table-row;
}

Upvotes: 0

Views: 67

Answers (1)

Toby
Toby

Reputation: 13375

Flexbox might be a good solution here:

https://jsfiddle.net/6c4agx54/2/

HTML:

<div class="container">
  <div class="col">
    <div>
      <img src="http://placehold.it/80x25" />
      <h6>
        Small Hdr
      </h6>
      <p>
        This is some text below the h6 heading.
      </p>
    </div>
  </div>
  <div class="col">
    <div>
      <img src="http://placehold.it/80x25" />
      <h6>
        Small Hdr
      </h6>
      <p>
        This is some text below the h6 heading.
      </p>
    </div>
  </div>
  <div class="col">
    <div>
      <img src="http://placehold.it/80x25" />
      <h6>
        Small Hdr
      </h6>
      <p>
        This is some text below the h6 heading.
      </p>
    </div>
  </div>
  <div class="col">
    <div>
      <img src="http://placehold.it/80x25" />
      <h6>
        Small Hdr
      </h6>
      <p>
        This is some text below the h6 heading.
      </p>
    </div>
  </div>
</div>

And CSS:

html, body {
  height: 100%;  
}

body {
  margin: 0;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
}

.container {
  min-height: 100%;
  display: flex;
}

.col {
  width: 20%;
  float: left;
  padding-left: 2.5%;
  padding-right: 2.5%;
  background: #F66A6D;
  display: flex;
  align-items: center;
}

.col:nth-child(even) {
  background: #F9B7B8;
}

h6 {
  font-size: 17px;
  border-bottom: 1px solid #fff;
  margin: 0;
  padding-bottom: 10px;
}

Note: I removed the framework you had added to the fiddle - if you can do this with plain HTML and CSS, you should be able to merge them quite easily, and a vanilla version of this serves the community better.

Upvotes: 1

Related Questions