css columns and content

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]

although using <table> is bad practice for creating layout. its the best practice for creating tables. so don't try to invent the wheel, for a table use a <table>. — avrahamcool
– avrahamcool, Commented Sep 10, 2013 at 20:04
I was trying to avoid using table because its old/outdated etc... and want to move forward with CSS3 and HTML5 — Ahmed ilyas
– Ahmed ilyas, Commented Sep 10, 2013 at 20:50
Tables are only old and outdated for page layout. Tables serve a very useful purpose for displaying repeating data in rows and columns. I don't see tables ever disappearing from html. — curt
– curt, Commented Sep 10, 2013 at 20:52

avrahamcool · Accepted Answer · 2013-09-12 21:42:02Z

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.

Collectives™ on Stack Overflow

css columns and content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related