2 replies [Last post]
sergec1
Offline
newbie
Last seen: 16 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-03-24
Posts: 1
Points: 0

I have a site which posts articles every month or so.

I would like the articles to be formatted in columns to make the reading easier.

Any ideas how this can be CSS defined?

Thanks

Serge

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 32 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Newspapers' type text columns?

There are various ways to achieve this, mainly using floats. It depends whether you want a fluid layout (i.e. the columns change size when the browser window is opened out or closed in), or a fixed layout (fixed widths etc. on the columns).

Fixed widths are the easiest to achieve, fluid ones, whilst not impossible, are harder.

Here's a great tutorial to get you started: http://glish.com/css/

The next sentence is true. The previous sentence is false. Discuss...

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 45 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Newspapers' type text columns?

Simple 'text columns' can be derfined using spans (for example) ~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Columns </title>

<style type="text/css">

.column {width:150px;border-right:1px dashed #000; padding:10px; float:left; text-align:justify;}

</style>
</head>

<body>
<p>
<span class="column">
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
  eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
  qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
  facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</span>
<span class="column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
  in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
  luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</span>
<span class="column">
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
  eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
  qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
  facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</span>
<p>
</body>
</html>

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk