www.webdeveloper.com
Results 1 to 3 of 3

Thread: two column staggered body --> css

  1. #1
    Join Date
    Jan 2003
    Location
    ohio
    Posts
    13

    two column staggered body --> css

    Front Page ver 3 has a template I like and occasionally make recourse to. A simplified version is:

    <tr>
    <td align="right" width="50%">supply content for left half, leave right half blank</td>
    <td width="50%"></td>
    </tr>

    <tr>
    <td align="right" width="50%"></td>
    <td width="50%">supply content for right half, leave left half blank</td>
    </tr>

    and, of course, this repeats until I'm out of content for the page.

    Can this (two column staggered body) design be reproduced in CSS? And if it can, can the column widths be EFFECTIVELY specified with percents? I throw that last one in as a kicker because I would prefer using percents but find that when the content of the columns (in the HTML example above) happens to be a collection of jpg thumbs being used as links, the columns expand in size to accommodate all the content as a single line and I wind up with a few yards of horizontal scrolling. This may be because the <img ...> specifies the src jpg's widths and heights in pixels. Mix and match may be the problem there. If so, would it be a similar problem with CSS if an analogue to the HTML can be made?

  2. #2
    Join Date
    Dec 2002
    Location
    Lake Havasu City, Arizona
    Posts
    527

    Re: two column staggered body --> css

    Originally posted by tom_f
    Front Page ver 3 has a template I like and occasionally make recourse to.

    Can this (two column staggered body) design be reproduced in CSS? And if it can, can the column widths be EFFECTIVELY specified with percents?
    It is nothing more than a two column however amount of rows table with blank cells.
    You can do that with align left or align right for your data in a one column table using your images or blank gif's.
    A 50%/395pixel blank gif aligned left/right staggered.
    I did ont this way with thumbs you click to enlarge. A nice effect. I don't use CSS too much yet.
    Everything else can be done with CSS, so why not this.

  3. #3
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Code:
    div.right { width: 50%; float: right; }
    div.left  { margin-right: 50%; clear: both}
    "left" has a right margin of 50% so behaves like floating to the left.

    Code:
    <div class="left">Blah Blah Blah</div>
    <div class="right">&nbsp;</div>
    
    <div class="left">Blah Blah Blah</div>
    <div class="right">&nbsp;</div>

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles