CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Andrew Willis
Andrew Willis

Reputation: 2349

CSS / jQuery improved page flow

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/

Upvotes: 0

Views: 444

Answers (2)

ubik
ubik

Reputation: 4560

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?

Upvotes: 1

Ram
Ram

Reputation: 144689

section {
   width: 100%;
}

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

Upvotes: 0

Related Questions