CODEWITHSUNDEEP
htmlcss
torbenrudgaard
torbenrudgaard

Reputation: 2561

Trying to break lines in DIV as well as I do in Tables

The top is how I want it to look (here I use table), but I'm having a real time making it work using DIV.

enter image description here

I tried with float, without float... it seems to be either breaking wrong or piling on top of each other. Any ideas how to do this? (other than using tables)

This works fine and looks the way I want it to

<table>
    <tr>
        <td style="vertical-align: top; width:5%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; font-weight:normal;">&nbsp; &#x25CF; </td>
        <td style="vertical-align: top; width:95%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; font-weight:normal;">{{transDepositReturn}}</td>
    </tr>
    <tr>
        <td style="vertical-align: top; width:5%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; font-weight:normal;">&nbsp; &#x25CF; </td>
        <td style="vertical-align: top; width:95%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; font-weight:normal;">{{transDepositReturn}}</td>
    </tr>
    <tr>
        <td style="vertical-align: top; width:5%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; font-weight:normal;">&nbsp; &#x25CF; </td>
        <td style="vertical-align: top; width:95%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; font-weight:normal;">{{transDepositReturn}}</td>
    </tr>
</table>

This is really hard to get to look the same way

<div style="width:100%;">
    <div style="width:5%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; font-weight:normal;">
        &nbsp; &#x25CF;
    </div>
    <div style="width:95%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; font-weight:normal;">
        {{transDepositReturn}}
    </div>
</div>

<div style="width:100%;">
    <div style="width:5%; float:left; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; font-weight:normal;">
        &nbsp; &#x25CF;
    </div>
    <div style="width:95%; float:right; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; font-weight:normal;">
        {{transDepositReturn}}
    </div>
</div>

<div style="width:100%;">
    <div style="width:5%; float:left; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; font-weight:normal;">
        &nbsp; &#x25CF;
    </div>
    <div style="width:95%; float:right; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; font-weight:normal;">
        {{transDepositReturn}}
    </div>
</div>

Upvotes: 0

Views: 36

Answers (1)

Kateryna S
Kateryna S

Reputation: 124

If you are avoiding tables you can achieve this result by simply using a list. Please see the following jsFiddle: https://jsfiddle.net/katerynas/nvtLvnpg/

<ul>
  <li class="bullet">text </li>
  <li class="bullet">text</li>
  <li class="bullet">text</li>
</ul>

.bullet {
  padding-left: 15px;

}

Upvotes: 1

Related Questions