firelynx firelynx - 5 years ago 93
HTML Question

What HTML tags to use for auto arranging boxes

Background



I am trying to layout a list of article links. Each article has a subject, an image and a small paragraph about the author of the image.

Like this:

+----------------+
| Article header |
+----------------+
| |
| Image |
| |
| Credit|
+----------------+


I am currently using a
div
with multiple
span
elements inside of it. These
span
s then contain the
a
,
img
and
p
.

Problem



The page is not valid HTML5.

Apparently a
span
cannot have a
p
inside of it.

I do not want to use a
table
even though my 90s knowledge of HTML urges me to. A
table
will not solve my problem either, because I want an uneven number of article links to order themselves naturally and not from left to right. Like this for five linked articles for instance:

+------+ +------+
| | | |
| | | |
+------+ +------+
+------+ +------+
| | | |
| | | |
+------+ +------+
+------+
| |
| |
+------+


Also if someone resizes the window the article links should collapse into a single column. I also may want to change the width of the articles or of their parent container to make three article links in one line.

Question



What tag types should I be using to make sure my HTML code is valid HTML5 and with minimal change to the default styles of those elements?

Addendum



I am not interested in solving anything with a client-side JavaScript library. My pages are tiny and should load fast, the question what tags to choose should be solved in the static HTML content of the page, not after the page has loaded.

Answer Source

A flexbox container will do exactly what you just described. I have made a JFiddle here that does what you asked. A flexbox allows you more flexibility than a table as far as aligning content as available space changes, and will collapse nicely into a single column.

Here is the code I used to accomplish this:

HTML

<div id="container">
  <div class="article">
    <span>Article 1</span>
    <div class="image" id="blue">    
    </div>
    <p>
    Credits
    </p>
  </div>
  <div class="article">
    <span>Article 2</span>
   <div class="image" id="red">    
    </div>
    <p>
    Credits
    </p>
  </div>
  <div class="article">
    <span>Article 3</span>
   <div class="image" id="green">   
    </div>
    <p>
    Credits
    </p>
  </div>
  <div class="article">
    <span>Article 4</span>
   <div class="image" id="blue">   
    </div>
    <p>
    Credits
    </p>
  </div>
</div>

CSS

#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.article {
  display: flex;
  flex-flow: column;
  width: 400px;
}
.article span, .article p {
  text-align: center;
}
.article div {
  margin: auto;
}
.image {
  width: 200px;
  height: 200px;
}
#blue {
  background: blue;
}
#red {
  background: red;
}
#green {
  background: green;
}

Of course you can replace the colored div elements I used with images. You may consider reading up on flexboxes here: https://developer.mozilla.org/en-US/docs/Web/CSS/flex. Webkits in that article should be included for different browsers.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download