CODEWITHSUNDEEP
htmlcss
kingrichard2005
kingrichard2005

Reputation: 7269

HTML text formatting

hopefully this is a really easy question. I'm trying to achieve the following style of formatting without using tables, as illustrated in the first picture. Is there a way to style the text content using span and/or div tags to make it look like the example at the bottom? Your insight is appreciated.

Using a table

Table Formatting

Desired Look

enter image description here

Update:

Thank you all for your suggestions, I wasn't sure if it was standard to use tables in this case or not.

Upvotes: 1

Views: 325

Answers (5)

Marcel
Marcel

Reputation: 28087

A definition/description list might be suitable for your purposes. Here's an example of how styling it might work accordingly.

HTML:

<dl class="in">
    <dt>Instructions</dt>
    <dd>ABC, 123<br>ABC, 123</dd>
</dl>
<dl class="ex">
    <dt>Examples</dt>
    <dd>ABC, 123<br>ABC, 123</dd>
</dl>

CSS:

dl { clear:both; margin:0 0 1em; }
dl dt { color:#666; width:7em; float:left; margin:0 1em 0 0; text-align:right; }
dl dd { margin:0 0 0 8em; }

Upvotes: 1

thirtydot
thirtydot

Reputation: 228162

If you don't mind having a fixed-width left column, try this:

Live Demo

HTML:

<dl>
    <dt>Instructions</dt>
    <dd>ABC, 123<br />ABC, 123<br /></dd>
    <dt>Example</dt>
    <dd>ABC, 123<br />ABC, 123<br /></dd>
</dl>

Floats are cleared.

CSS:

dl {
   overflow: hidden
}
dt, dd {
    float: left;
    width: 100px
}
dt {
    clear: both;
    text-align: right;
    padding: 0 9px 0 0
}

Although it isn't:

using span and/or div tags

I believe that my choice of tag makes more semantic sense here.

Upvotes: 6

Loktar
Loktar

Reputation: 35309

Ready for some Div soup?

http://jsfiddle.net/loktar/WSqRR/5/

Markup

<div id="wrapper">
    <div class='left'>
        Instructions:
    </div>
    <div class='right'>
        <p>ABC,123</p>
        <p>ABC,123</p>
    </div>
    <br class='clear'/>
    <div class='left'>
        Im so long thats right LONG:
    </div>
    <div class='right'>
        <p>ABC,123</p>
        <p>ABC,123</p>
    </div>
</div>

CSS

#wrapper{width:auto;}
.left,.right{float:left;text-align:right; width:50%;}
.right{float: right; text-align:left;}
.clear{clear:both;}

Upvotes: 1

Gareth
Gareth

Reputation: 5719

HTML:

<p class="title">Instructions:</p>
<p>ABC,123</p>
<p>ABC,123</p>
<p class="title">Examples:</p>
<p>ABC,123</p>
<p>ABC,123</p>

CSS:

p
{
    margin-left: 210px;
}
.title
{
    margin: 0;
    width: 200px;
    text-align:right;
    float:left;
}

though I have to say, as mentioned in answers above, it does look a bit like tabular data. In which case using tables is okay.

EDIT: http://jsfiddle.net/TZpXd/

Upvotes: 0

Kyle
Kyle

Reputation: 67194

In CSS:

table
{
    border; 0;
}

If that doesn't work then you probably have a border setting in your HTML:

<table border="1">

Or something like that, remove the declaration and use CSS as above :)

Upvotes: 1

Related Questions