Help working out the best method of laying out this page section?

Hi all,

My minds drawing a blank on the best way to possibly lay out the design ive attached to this post, can this be achieved using <dl> or <ul> tags or would there have to be divs etc?

All suggestions appreciated

Here’s the link


I would probably use an <ul> for that. You could float bits to the right wrapped in spans. The links in the first li could be a sub list.

As Ralph said a ul could be used or perhaps a dl list would be more appropriate as you have a term and a definition(s).

The css is much the same either way but you have three different structures to deal with as “My Vitals” and “Where I’m from” are different to the other elements. It just means that you will need extra rules to accommodate the differences.

Looking at the structure it could also be a header followed by content so you could use a suitable heading tag and then normal divs and paragraphs etc.

<h3>My Vitals<h3>
<ul class=“social”>
<li>Join me …</li>
<li>follow me …</li>


<h3>Where I’m From</h3>
<div>Map here</div>

Lots of ways :slight_smile:

Excellent guys, Im putting together a couple of ways then going to work out which one works best for me. Thanks!