"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 "I got lost".</p>
</span>
</body>
</html>
Matt Probert
|
