On 14 Jul, 12:47, Adam Smith <adamsm...@econ.comwrote:
Hello,
Several of the newer, more professional web sites are using a newspaper
columnar layout, with text and links discretely contained in rectangular
boxes (square or rounded), frequently with colored 'Title' tabs at the
top.
Example URL?
"Newspaper" columns have a specific meaning, as side-by-side columns
where the text is flowed first down one, then the others. You can't do
this with CSS, and there are usability reasons why it's not
appropriate to do so on the web anyway (newspapers need to remain
broadly squareish, web pages scroll better if they only need to do it
in one direction,. no matter how long). It's doable for print with
XSL:FO.
What you're describing here sounds like fairly simple use of "float"
on a <div(quite probably invisible) that contains the whole
malarkey. Images, captions and borders can be applied inside this, as
separate elements. You should probably also require all of these to be
placed inside an overall "content" <div>. You can now place a class on
each in the HTML and use a CSS selector on the two class names, such
as:
..content .figure {
float: left;
clear: none;
margin: 0 20px 3em 0px;
width: auto;
}
If you want the figure box to flip to the other side, add a second
class name to it (both names in the same HTML class attribute) and CSS
like this:
..content .figure.float-right {
float: right;
margin: 0 0px 3em 20px;
}
Text alongside these boxes can just go into a <p>, as normal. You
shouldn't need to style these specially, but just make sure the float
& clear aren't otherwise in effect, with:
..content p {
float: none;
clear: none;
}
You'll also need to "clean up after" the floated elements by placing
an _extra_ element such as <hrafter them and setting CSS float:
none; clear : both; on it. Do this before the end of <div
class="content" >
..content hr {
clear: both;
float: none;
height: 0;
border: none;
visibility: hidden;
}
http://brainjar.com/css/positioning/ is about the best and most
readable introduction to CSS positioning, particularly float.
In simple cases, one <divcan hold each <imgand also handle the
floating. If you need more precise control over caption position etc.
though, don't be afraid to place extra elements inside this. It's
easier to do simple things to more elements than it is to try and do
everything on one element alone.