Element positioning in column-count is messed up

Question

I am trying to use CSS properties to properly align article elements in a <div>. I have three article elements which will have an image of an old website and a description along with a title. However, as you'll see in the code below, the header for the <div> and the elements I want lined up are on one line. I want the header to be above the articles. [Edited for clarity]

HTML

<div id="website-examples">

  <h1 class="section-header">Site Examples</h1>

  <a href="#" title="Post 1">
    <article>
      <p>djsalkjadslgkjasdgljdg dsgkjlds;lgjdslkgjdslg jasd;lg dslgkj dslgj sljgs a</p>
      <figure>
        <img src="http://www.border7.com/blog/wp-content/uploads/2012/07/HTML.png">
        <figcaption>Original Homepage</figcaption>
      </figure>
    </article>
  </a>
  <a href="#" title="Post 2">
    <article>
      <p>djsalkjadslgkjasdgljdg dsgkjlds;lgjdslkgjdslg jasd;lg dslgkj dslgj sljgs a</p>
      <figure>
        <img src="http://www.border7.com/blog/wp-content/uploads/2012/07/HTML.png">
        <figcaption>Original Homepage</figcaption>
      </figure>
    </article>
  </a>
  <br>
  <a href="#" title="Post 3">
    <article>
      <p>djsalkjadslgkjasdgljdg dsgkjlds;lgjdslkgjdslg jasd;lg dslgkj dslgj sljgs a</p>
      <figure>
        <img src="http://www.border7.com/blog/wp-content/uploads/2012/07/HTML.png">
        <figcaption>Original Homepage</figcaption>
      </figure>
    </article>
  </a>
</div>

CSS

#website-examples {
  background-color: rgba(240, 237, 237, .5);
  padding: 3% 10%;
  column-width: 220px;
  column-count: 3;
  column-gap: 30px;
  display: flex;
  height: 500px;
}

#website-examples h1 {
  margin-top: -30px;
  margin-bottom: 100px;
  width: 100%;
}

#website-examples a[title] {
  text-decoration: none;
  padding: 1rem;
  color: #424242;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .25);
  display: inline-block;
  height: 50%;
}

a[title] figure img {
  width: 100%;
  height: auto;
}

And here is the JSFiddle:

https://jsfiddle.net/cjbruin/yp8b05qh/

What's overlapping? I don't see anything overlapping... can you make a screenshot? And you're using `flex` and `column` on `#website-examples`. I'm assuming that's part of the problem. You need to pick one or the other :) — Michael Coker, May 23 '17 at 01:11
@Micheal Coker sorry I did not mean overlapping but rather I wanted the header above the article columns and not on the same line — Colin Bruin, May 23 '17 at 01:15
The easiest fix is just to move the `h1` above `#website-examples` https://jsfiddle.net/yp8b05qh/1/ otherwise you would need to set `flex-wrap: wrap` on `#website-examples` but then your column elements are messed up https://jsfiddle.net/yp8b05qh/2/ — Michael Coker, May 23 '17 at 01:17
Thank you I was trying to avoid that but it does seem like the only reasonable solution! — Colin Bruin, May 23 '17 at 01:36

score 1 · Accepted Answer · answered May 23 '17 at 02:54

I don't see overlapping, but as in your comments, you wanted the header above the article columns, and not on the same line.

As what @MichaelCoker had stated, you should move the h1 tag above the #website-examples tag:

<h1 class="section-header">Site Examples</h1>

<div id="website-examples">

--- some code here ... ---

Fiddle here ... (by @MichaelCoker)

Element positioning in column-count is messed up

1 Answers1