CSS / jQuery improved page flow

Question

I want to make my web page flow better but I don't know what it's called that I am searching for!

Lets say I have the following HTML:

<section>
  <article>
    <h1>Article Header</h1>
    <p>Article content</p>
  </article>
  <article>
    <h1>Article Header</h1>
    <p>Article content</p>
    <p>More content</p>
  </article>
  <article>
    <h1>Article Header</h1>
    <p>Article content</p>
    <p>More content</p>
    <p>More content</p>
  </article>
  <article>
    <h1>Article Header</h1>
    <p>Article content</p>
    <p>More content</p>
    <p>More content</p>
    <p>More content</p>
  </article>
  <article>
    <h1>Article Header</h1>
    <p>Article content</p>
    <p>More content</p>
    <p>More content</p>
  </article>
  <article>
    <h1>Article Header</h1>
    <p>Article content</p>
    <p>More content</p>
  </article>

and the following CSS

section article {
  width: 49%;
  display: inline-block;
}

That makes the articles appear side by side in the section, but there are gaps where the articles different sizes.

How would I make it flow so there were no gaps (ie fill the available space) ?

I am open to a solution using jQuery / JavaScript if needs be.

fiddle added:

http://jsfiddle.net/Yn4et/

Linking to a jsfiddle.net would have made me want to look at this. — Marc, May 12 '12 at 16:37
i guess you want something in which if the article size increases then the overflow that comes in that particular article should be removed.? how about overflow scroll / hidden — kishanio, May 12 '12 at 16:42
no, I want the content to be shifted up to make better use of the space without forcing the boxes to be smaller — Andrew Willis, May 12 '12 at 16:49

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

I'm not sure I understand correctly what you want, but I think this is a duplicate of the following question:

How to Create Grid/Tile View with CSS?

edited May 23 '17 at 11:48

Community

1
1

answered May 12 '12 at 16:49

ubik

4,440
2
23
29

score 0 · Answer 2 · answered May 12 '12 at 16:39

0

section {
   width: 100%;
}

article {
  width: 50%;
  display: inline-block;
  margin: 0;
  padding:0;
}

answered May 12 '12 at 16:39

Ram

143,282
16
168
197

CSS / jQuery improved page flow

2 Answers2