How to make text appear in columns in HTML

Bevan picture Bevan · Oct 16, 2012 · Viewed 38.2k times · Source

Sorry, this is probably a thick question, but how to I get HTML to display similar to using the tab button in Word? I want to display like this:

header text      header text      Header text  
text in column   text in column   text in column  

If i use the spacebar, it just ignores the spaces. Actually, I will be putting razor variables in the columns, but that's the general idea of what I'm trying to create.

No doubt there's a div tag or similar that represents the 'tab' function, or columnises the text - I just don't know it!

Answer

Diodeus - James MacFarlane picture Diodeus - James MacFarlane · Oct 16, 2012

You need to use CSS + HTML, not character-based mark-up.

<div class="column">
    <h2>header text</h2>
    <p>paragraph text</p>
</div>
<div class="column">
    <h2>header text</h2>
    <p>paragraph text</p>
</div>
<div class="column">
    <h2>header text</h2>
    <p>paragraph text</p>
</div>

css:

.column {
     width:300px;
     float:left
}