Best way to lay out this info?

HTML & CSS
1

Hi,

I want to lay out the following info horizontally in a container 460px wide:

32 Likes (Restricted to 50px wide, facebook likes) (whitespace) From Great Britain(Post location) (whitespace) Featured (Floated to the right, category)

What would you recommend being the best tags to use to lay these out?

An image of what I mean can be viewed here http://www.flickr.com/photos/62570778@N04/5693086371/in/dateposted/

Kyle

2

You could have them be spans in a main div.

3

Sounds like a sentence to me:

“32 likes from Great Britain featured”.

I probably do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.likes{
    width:460px;
    border-top:3px solid #f00;
    text-align:right;
    border-bottom:1px solid #000;
    padding:0 0 3px;
    text-transform:uppercase;
    overflow:hidden;
    font-size:85%;
    line-height:32px;
}
.likes span,.likes em{float:left}
.likes span{
    text-align:center;
    width:50px;
    background:#f00;
    margin:0 10px 0 0;
    color:#fff;
    font-size:85%;
    line-height:1.0;
    padding:2px;
}
.likes b{
    font-size:120%;
    display:block;
}
.likes em{
    font-style:normal;
    font-weight:normal;
    clor:#666;
}



</style>
</head>

<body>
<p class="likes"><span><b>32</b>likes</span> <em>From Great Britain</em> <strong>Featured</strong></p>
</body>
</html>

I made the country and the “featured” key points and the b element just for styling the bold text.

4

Thats awesome Paul, thanks very much!