css columns and content - html

Question

This probably is the most frequently asked question however I am not really able to find anything that seems to work for me - I am a newbie # styling/css.
I would like a cross browser compliant solution (IE9 or higher btw) where I can have as a header (first row) 3 columns:
Name_____DOB______Contact
underneath, there will be content. a row of data and I want the row of data (which is contained in a div) to be aligned correctly with the column headings.
Currently I have this:
<div style="width: 100%">
<div style="width: 300px; float:left">Name</div>
<div style="width: 200px; float:left">DOB</div>
<div style="width: 100px; float:left">Contact</div>
</div>
in terms of the data, I am using MVC4 with Razor so I am just using a for loop to go through a collection of data and spitting it out in a div i.e:
[for loop here]
<div id="refitem_#counter">
[data here]
</div>
[end for loop]

Answer 1

You can continue with the same approach.
<div>
<div style="width: 100%">
<div style="width: 300px; float:left">Name</div>
<div style="width: 200px; float:left">DOB</div>
<div style="width: 100px; float:left">Contact</div>
</div>
<div style="width: 100%">
<div style="width: 300px; float:left">Name 1</div>
<div style="width: 200px; float:left">DOB 1</div>
<div style="width: 100px; float:left">Contact 1</div>
</div>
<div style="width: 100%">
<div style="width: 300px; float:left">Name 2</div>
<div style="width: 200px; float:left">DOB 2</div>
<div style="width: 100px; float:left">Contact 2</div>
</div>
..
</div>
I'm strongly dis-advise you to use that. use a table instead.
also (as a BTY): don't mix your markup and CSS, use something like that.
HTML:
<div>
<div>
<div class="column col1">Name</div>
<div class="column col2">DOB</div>
<div class="column col3">Contact</div>
</div>
<div>
<div class="column col1">Name 1</div>
<div class="column col2">DOB 1</div>
<div class="column col3">Contact 1</div>
</div>
<div>
<div class="column col1">Name 2</div>
<div class="column col2">DOB 2</div>
<div class="column col3">Contact 2</div>
</div>
..
</div>
CSS:
.column
{
float: left;
}
.col1
{
width: 300px;
}
.col2
{
width: 200px;
}
.col3
{
width: 100px;
}
width: 100%; is the default behaviour for a block element (like a div) so you should omit it.