How Can I Code CSS To Make Table Like?

I want to make the Tags list just like this below. I want to use CSS instead of using Table tag. How can I do this? Tags: Apple Banana Melon Strawberry Kiwi Orange Pineapple

Solution 1:

Use display:table-cell

HTML

<div class="table">
  <div class="td">tags</div>
  <div class="td">Apple Banana Melon Strawberry Kiwi Orange Pineapple Carrot Onion Tomato Bacon Sandwitch SoyBeans Pork Beef Chicken </div>
</div>

CSS

.table{display:table-row; width:350px; }
.td:first-child{width:10px; }
.td{display:table-cell;  padding:10px; width:320px}

LIVE DEMO

Solution 2:

You can do it like this:

HTML:

<div class="left">
    Tags:
</div> 
<div class="right">
    Apple Banana Melon Strawberry Kiwi Orange 
    Pineapple Carrot Onion Tomato Bacon 
    Sandwitch SoyBeans Pork Beef Chicken 
</div>

CSS:

.left, .right
{
color:#2B91AF;
}

.left
{
  float: left;
  width: 30px; //adjust this width according to your needs
  margin-right: 10px; //adjust this margin according to your needs
}

.right
{
  float: left;
  width: 400px; //adjust this width according to your needs
}

Here is a fiddle just because it's nice: http://jsfiddle.net/VQjGW/

Solution 3:

For something like this I would advice using a Definition List. You can read a great article on this here: http://css-tricks.com/utilizing-the-underused-but-semantically-awesome-definition-list/

After that it should be easy enough to use css and position the elements like in your example .