6 replies [Last post]
karlmarx
karlmarx's picture
Offline
newbie
Last seen: 2 years 22 weeks ago
Timezone: GMT-5
Joined: 2012-02-19
Posts: 4
Points: 5

<p>lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text</p>
 
 
<table>
  <tr><td align="right">right aligned text</td></tr>
  <tr><td>left aligned text left aligned text left aligned text left aligned text</td></tr>
<table>
 
 
<p>lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text</p>

What's the CSS equivalent of the above. NOTE: The table is shrink wrapped. The width of the table is smaller the the paragraph of text below or above it!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 48 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Floats

Float the content that goes right to the right and the content that goes left to the left and make sure to clear the floats for any content following.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

karlmarx
karlmarx's picture
Offline
newbie
Last seen: 2 years 22 weeks ago
Timezone: GMT-5
Joined: 2012-02-19
Posts: 4
Points: 5

It's not that simple

It's not that simple. The aligned text in the center must be shrink wrapped like a table would do it.

NOTE: Without specifying widths!

karlmarx
karlmarx's picture
Offline
newbie
Last seen: 2 years 22 weeks ago
Timezone: GMT-5
Joined: 2012-02-19
Posts: 4
Points: 5

Boobs

People who pooh pooh tables are boobs!

[mod edit: No, those who misuse tables are the boobs. ~gt]

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 36 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9149
Points: 3133

Structure is not presentation

It appears you're as ignorant of html structure and css presentation as your namesake was of economics.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test document</title>
    <style type="text/css">
 
      body { 
        margin: 0;
        padding: 0; 
        font: 100%/1.25 sans-serif;
        }
 
      p {
        font-size: 1em;
        margin: 1.25em 0;
        }
 
      #colholder {
        border-spacing: 1.25em;
        display: table;
        margin: 0 auto;
        }
 
      #colholder div {
        padding:  0 1.25em;
        }
 
      #colholder div:first-child {
        border: 1px solid black;
        display: table-cell;
        text-align: right;
        }
 
      #colholder div:last-child {
        border: 1px solid black;
        display: table-cell;
        }
 
    </style>
  </head>
 
  <body>
    <p>Duis accumsan volutpat mattis! Quisque et sodales tellus. Nulla
    quis dui turpis. Donec ut accumsan libero. Nullam adipiscing
    tellus sit amet purus malesuada pulvinar sed eget neque. Nunc
    feugiat, arcu sit amet viverra mollis, quam libero lacinia dolor;
    ut fermentum risus erat porta ante. Cras aliquam mollis lacus,
    vitae fringilla.</p>
 
    <div id="colholder">
      <div>
	<p>Right aligned text<br />
           second line</p>
      </div>
 
      <div>
	<p>Left aligned text Left aligned text<br />
           Left aligned text</p>
      </div>
    </div>
  </body>
</html>

Depending on how far back your browser support must reach, it may be better to use inline-blocks or even restrict yourself a bit and use floats. I wouldn't disparage Tyssen's suggestion too much, as his solution meets your rather unclear-on-the-specs problem statement. Plus he knows a hell of a lot more than you do on this subject.

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 40 weeks 3 days ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

Nice update. thanks for your

Nice update. thanks for your valuable code.

gary.turner wrote:

It appears you're as ignorant of html structure and css presentation as your namesake was of economics.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test document</title>
    <style type="text/css">
 
      body { 
        margin: 0;
        padding: 0; 
        font: 100%/1.25 sans-serif;
        }
 
      p {
        font-size: 1em;
        margin: 1.25em 0;
        }
 
      #colholder {
        border-spacing: 1.25em;
        display: table;
        margin: 0 auto;
        }
 
      #colholder div {
        padding:  0 1.25em;
        }
 
      #colholder div:first-child {
        border: 1px solid black;
        display: table-cell;
        text-align: right;
        }
 
      #colholder div:last-child {
        border: 1px solid black;
        display: table-cell;
        }
 
    </style>
  </head>
 
  <body>
    <p>Duis accumsan volutpat mattis! Quisque et sodales tellus. Nulla
    quis dui turpis. Donec ut accumsan libero. Nullam adipiscing
    tellus sit amet purus malesuada pulvinar sed eget neque. Nunc
    feugiat, arcu sit amet viverra mollis, quam libero lacinia dolor;
    ut fermentum risus erat porta ante. Cras aliquam mollis lacus,
    vitae fringilla.</p>
 
    <div id="colholder">
      <div>
	<p>Right aligned text<br />
           second line</p>
      </div>
 
      <div>
	<p>Left aligned text Left aligned text<br />
           Left aligned text</p>
      </div>
    </div>
  </body>
</html>

Depending on how far back your browser support must reach, it may be better to use inline-blocks or even restrict yourself a bit and use floats. I wouldn't disparage Tyssen's suggestion too much, as his solution meets your rather unclear-on-the-specs problem statement. Plus he knows a hell of a lot more than you do on this subject.

karlmarx
karlmarx's picture
Offline
newbie
Last seen: 2 years 22 weeks ago
Timezone: GMT-5
Joined: 2012-02-19
Posts: 4
Points: 5

No kidding

I've never seen the display: table property used before. I'll use the display: inline-block property.