alt.www.webmaster Notes for Novices

 

"Newspaper" style columnar layout with CSS

So tables are better for layout than CSS? CSS is difficult? Read on.....

The following very simple bit of CSS layout provides a heading text box and two columnar text boxes in the style of a newspaper. I have deliberately added some extra styles to the text boxes, for example a font size for the title, simply to illustrate what can be done very simply.

The important thing to notice is that each text box is defined by a <span></span> pair of tags, with CSS style markup added.

I'm not sure how legitimate the use of relative units (percentages) within absolute positioning instructions is, however!

<html>
<head>
<title>Newspaper Style</title>
</head>
<body>

<span style="width:100%; height:10%; position:absolute; left:10px;
top:10px; text-align: center; font-size:22pt; border: red double">
The Daily Bore
</span>

<span style="width:45%; position:absolute; left:10px; top:15%; border:
black solid">
<p>This is a two column news paper style of news reporting web page using CSS text boxes, rather than tables for the layout.</p>
<p>Borders have been added to highlight the text areas more clearly.</p>
<p>I feel this is even easier to use than a table for layout, and of course is more flexible and better supported!</p>
Relative coordinates have been used to set a gutter between the columns and between the columns and the header, this has the advantage that the page resizes - albeit with a change in appearance but none-the-less the columns remain, as do the relative sizes and spacings of the columns, they simply become longer as the total browser window becomes narrower.
</span>

<span style="width:45%;  position:absolute; left:55%; top:15%; border:
black solid">
In other news:
<p>Blonde falls off cliff, takes two days to reach bottom. When
questioned was heard to reply &quot;I got lost&quot;.</p>
</span>

</body>
</html>


Matt Probert



Return to Notes for Novices  
Return to AWW Faq

W3C 4.01  W3C CSS    WAI-AAA