How to align text without tables

Question

How would you align text like this without tables?

<table>
 <tr>
   <td>*</td>
   <td>Long Text</td>
 </tr>
 <tr>
  <td>*</td>
  <td>Long Text</td>
 </tr>
</table>

or use `div`s and then align divs => http://stackoverflow.com/questions/21430203/align-multiple-divs-in-one-line-and-center-text-veticaly-and-horizontally — NoobEditor, Dec 24 '14 at 11:41
@NoobEditor using divs and aligning them is more difficult than text align — stranger4js, Dec 24 '14 at 11:42

score 1 · Answer 1 · answered Dec 24 '14 at 11:48

use display:inline-block property

<div class="a">

    <p class="p1">*</p>
    <p  class="p2">kjwhkwgkufygajkfgxaskjfgkj hsgdfjkagsdkufygukasygfkjsghadfjkghfjkahgxf jasghdfkjaghxfkjkjasghfuhxg kjasdgh</p>
</div>
<div class="a">

    <p class="p1">*</p>
    <p  class="p2">kjwhkwgkufygajkfgxaskjfgkj hsgdfjkagsdkufygukasygfkjsghadfjkghfjkahgxf jasghdfkjaghxfkjkjasghfuhxg kjasdgh</p>
</div>

css

.p1{
    width:2%;
    display:inline-block;
    vertical-align:top;
}
.p2{
      width:80%;
    display:inline-block;
        vertical-align:top;
}
.a{
    width:600px;
}

link

score 1 · Answer 2 · answered Dec 24 '14 at 11:53

1

You can do this with floating divs.

<div>
  <div class="leftDiv">*</div>
  <div class="rightDiv">Long Text</div>
  <div class="leftDiv">*</div>
  <div class="rightDiv">Long Text</div>
</div>

and then float them next to each other in the CSS

.leftDiv
{
    clear:both;
    width:5%;
    float:left;
}
.rightDiv
{
    width:95%;
    float:left;
}

http://jsfiddle.net/u6kwbm0b/

answered Dec 24 '14 at 11:53

Modred

249
3
15

The 5% does not cause the same appearance as the original. And the text will flow into the asterix when you make the screen pretty narrow. – no_gravity Dec 24 '14 at 12:33
The 5% was more for example, would probably be better as 1em with hindsight, although this would cause the right div to flow under as the screen size diminishes. – Modred Dec 24 '14 at 12:36

score 0 · Accepted Answer · answered Dec 25 '14 at 09:05

0

In the end, I used a somewhat complex solution:

http://jsfiddle.net/4xq55vg6/10/

p
{
    margin-left: 1.5em;
    display: block;
}

p:before
{
    content: "*";
    margin-left: -1em;
    display: inline-block;
    position: absolute;
}

answered Dec 25 '14 at 09:05

no_gravity

579
1
3
14

score -1 · Answer 4 · answered Dec 24 '14 at 11:41

-1

Maybe something like this

td{
text-align:center;
}

you can use right center left justify values for text-align

answered Dec 24 '14 at 11:41

stranger4js

269
4
15

score -1 · Answer 5 · answered Dec 24 '14 at 11:43

-1

Like this:

<div style="width:100%;text-align:center">Hello</div>

Of course you shouldn't use inline-styles. Better:

<div class="aClass">Hello</div>


.aClass{text-align:center;width:100%;}

answered Dec 24 '14 at 11:43

Fabian Lurz

2,029
6
26
52

yesenin · Answer 6 · 2014-12-24T11:48:42.087

-1

    ul {
      list-style: none;
      margin-left: 0;
      padding-left: 1em;
      text-indent: -1em;
    }

<ul>
  <li>* This is a ... ng it?</li>
  <li>* And here is an ... way of doing it?</li>
</ul>

http://jsfiddle.net/4xq55vg6/5/

edited Dec 24 '14 at 11:48

answered Dec 24 '14 at 11:45

yesenin

199
7

anpsmn · Answer 7 · 2014-12-24T11:51:33.333

-1

Looking at the fiddle you can keep those lines in <p> tag and in CSS add a content: "*" before

HTML

<p>This is a long text... </p>
<p>And here is another text....</p>

CSS

p:before { content: "*"}

Fiddle

edited Dec 24 '14 at 11:51

answered Dec 24 '14 at 11:46

anpsmn

7,217
2
28
44

1

Nice and simple but the wrapped text will remain under the asterisk and will not stay in it's own 'cell' – Modred Dec 24 '14 at 12:21
Aah, then you will have to have a new element for * and have it floated like in other answers – anpsmn Dec 24 '14 at 12:28

How to align text without tables

7 Answers7