Geek asks and answers

How to align two columns of text in CSS

I'm having trouble aligning the text. I need two columns: one with numbers and one with text, for example:

1 Input one
2 Entry two
3 Input three
4 Input five
5 Introduction six

The left column is Georgia, and the right column is Arial (several different font sizes). I could have a div container for each line and absolutely position the number and paragraphs of text at the top or bottom, which works fine. The problem is that I have to give each line a fixed height so that it displays correctly, which causes a problem if the text needs to flow over several lines (which may well do since the text entries are dynamic). A.

I want to do this without using a table and without using absolute positioning so that individual text entries can span more than one row (and are compatible with multiple browsers).

+2
source share
2 answers

According to my comment, I believe that the best element for the job is an ordered list .

ol {
   font-family: georgia, serif;
   font-size: 16px;
   font-weight: bold;
}
ol li span {
   font-family: arial, sans-serif;
   font-weight: normal;
   font-size: 12px;
}
<ol>
  <li><span>Entry one<br>text on another line</span></li>
  <li><span>Entry two</span></li>
  <li><span>Entry three</span></li>
  <li><span>Entry five</span></li>
  <li><span>Entry six</span></li>
</ol>
Run codeHide result

With a range that allows you to change font-familybetween the "bullets" list and the contents inside, they can be divs if you have block contents.

+3
source

You should just use the appropriate style ol, something like this:

See: http://jsfiddle.net/tPjQR/

, li - span. .

ol {
    font-family: Georgia, serif;
}
ol span {
    font-family: Arial, sans-serif;
    font-size: 17px
}
<ol>
    <li><span>Entry one</span></li>
    <li><span>Entry two</span></li>
    <li><span>Entry three</span></li>
    <li><span>Entry five</span></li>
    <li><span>Entry six</span></li>
    <li><span>Entry Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</span></li>
</ol>
+3

More articles:


All Articles