Semantically Stinky?


I am laying out a profile page. I wanted a persons name and their phone number on one line with the phone number being aligned right and the name aligned left. I then have address and email on the next line that follow the same right/left behaviour. I wanted this to be semantically correct and while it doesn’t break any rules, I don’t normally have more than one h2 at a time not seperated by a block level element like a <p> or <table> or <ul>… So the question does this grouping of h2’s wreck the semantics?

Here is the damage :wink:

<h1 class='alignleft'>Name</h1>
<h2 class='valign_bottom alignright'>Phone: 000 000-0000</h2>
<div style="clear: both;"></div>
<h2 class='cramp alignleft'>Street, City, Province, Postal Code</h2>
<h2 class='cramp alignright'></h2>
<div style="clear: both;"></div>

And the CSS

h1 { font-size: 1.5em; color: #336699;  }       
h2 { font-size: 1.1em; color: #336699; }
h1, h2, h3, h4, h5, h6, h7, .h1_bottom { font-family: 'Arvo', Georgia, Times, serif;}
.alignleft {float: left;}    
.alignright {float: right;}    
.valign_bottom { margin-top: 1.2em;}
.cramp { margin: -0.9em 0 0 0}

I’d love to here your thoughts on this!

Warm regards,

Very stinky…

I’d do something like this.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
h1 {
  float: left;
.details {
  list-style: none;
  margin: 0;
  padding: 0;
.details li {
  margin: 0;
  padding: 0;
.phone {
  float: right;
.address {
  float: left;
  clear: left;
.email {
  float: right;
<ul class="details">
  <li class="phone">Phone: 000 000-0000</li>
  <li class="address">Street, City, Province, Postal Code</li>
  <li class="email"></li>

As a rule it 'aint a heading if there’s nothing underneath it.

Well glad you stamped that stink in the olfactory glands, as your solution is so much better.

I don’t know why I didn’t think of using a list, when I use them all the time for horizontal menus :eek:

Thanks Mark!