Wed, 2004-03-24 16:32
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
Wed, 2004-03-24 17:02
#1
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/
Fri, 2004-03-26 16:39
#2
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>