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>