CODEWITHSUNDEEP
htmlcss
Mike D
Mike D

Reputation: 2841

HTML delayed indent

I want to make some html output look like this...

Tag1             blah blah blah asdfge kedkled pijj ;dopkd
                 uiedeidiud edioejd
Tagbigger        more blah blah blah wdeodeodd  epkdepdpd 
                 more of the same...

I imagine the html itself might look something like 

<p>Tag1<zz>blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</zz></p>
<p>Tagbigger<zz>more blah blah blah wdeodeodd  epkdepdpd more of the same...</zz></p>

except I don't want the blank line between paragraphs.

Is there some standard type setting name for this? Better yet, can somebody point me at a style sheet?

Upvotes: 1

Views: 253

Answers (5)

BoltClock
BoltClock

Reputation: 724142

If it doesn't quack like a table, I use CSS-floated <dt>s and <dd>s to accomplish this (similar to what I do in the portfolio page of my web site).

Untested sample code follows...

HTML:

<dl>
    <dt>Tag1</dt>
    <dd>blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</dd>

    <dt>Tagbigger</dt>
    <dd>more blah blah blah wdeodeodd  epkdepdpd more of the same...</dd>
</dl>

CSS:

dl, dt, dd {
    margin: 0;
    padding: 0;
}

dl {
    overflow: hidden;
}

dt {
    clear: both;
    float: left;
    width: 15%;
}

dd {
    float: right;
    width: 85%;
}

Upvotes: 2

Dagg Nabbit
Dagg Nabbit

Reputation: 76756

First, just for the heck of it...

<pre>
Tag1             blah blah blah asdfge kedkled pijj ;dopkd
                 uiedeidiud edioejd
Tagbigger        more blah blah blah wdeodeodd  epkdepdpd 
                 more of the same...
</pre>

Here's what you want, using inline styles...

<div style="width:400px;">

  <div style="float:left;">Tag1</div>

  <div style="margin-left:150px;">blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</div>

  <div style="float:left;">Tagbigger</div>        

  <div style="margin-left:150px;">more blah blah blah wdeodeodd epkdepdpd more of the same...</div>

</div>

...or classes and a stylesheet.

<style>
  .container {width:400px;}
  .tag {float:left;}
  .blah {margin-left:150px;}
</style>

<div class="container">

  <div class="tag">Tag1</div>

  <div class="blah">blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</div>

  <div class="tag">Tagbigger</div>        

  <div class="blah">more blah blah blah wdeodeodd epkdepdpd more of the same...</div>

</div>

Upvotes: 1

Pyae Phyoe Shein
Pyae Phyoe Shein

Reputation: 13827

<style>
div#left {float:left; width:30%;}
div#right {float:left; width:69%;}
</style>


<div>
     <div id="left">Tag1</div>
     <div id="right">blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</div>
</div>
<div>
     <div id="left">Tagbigger</div>
     <div id="right">more blah blah blah wdeodeodd  epkdepdpd more of the same...</div>
</div>

Upvotes: 0

Kristof Mols
Kristof Mols

Reputation: 3557

You should add the following in your <p> tags:

style="margin: 0px;"

Upvotes: 0

John Kugelman
John Kugelman

Reputation: 361849

If it looks like a table, and quacks like a table...

<table>
  <tr>
    <th>Tag1</th>
    <td>blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</td>
  </tr>

  <tr>
    <th>Tagbigger</th>
    <td>more blah blah blah wdeodeodd  epkdepdpd more of the same...</td>
  </tr>
</table>

Upvotes: 3

Related Questions