By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,217 Members | 1,811 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,217 IT Pros & Developers. It's quick & easy.

Newspaper layout, floating boxes?

P: n/a
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.

How are these boxes generated, are they using 'floating boxes'
juxtapositioned to create the layout effect?

Thanks
Jul 14 '08 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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.
Jul 14 '08 #2

P: n/a
Andy Dingley wrote:
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?
>
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.
Hi Andy,
Thanks ! you answered my question admirably

The example I should have included was
http://www.msn.com/
A typical an good example where it is used extensibly.

Thanks again
Jul 14 '08 #3

P: n/a
On Mon, 14 Jul 2008 13:22:48 -0700, Adam Smith <ad*******@econ.com>
wrote:
>The example I should have included was
http://www.msn.com/
You might also find this helpful
http://codesmiths.com/dingbat/lj/usenet/pullquote/
Jul 15 '08 #4

P: n/a
Andy Dingley wrote:
On Mon, 14 Jul 2008 13:22:48 -0700, Adam Smith <ad*******@econ.com>
wrote:
>The example I should have included was
http://www.msn.com/

You might also find this helpful
http://codesmiths.com/dingbat/lj/usenet/pullquote/
Was this link the intended target ? it showed
ref Usenet alt.html

The latter, by far the most radical, would, for example, prevent Cara
Black from defending her women's doubles title at Wimbledon.

But the Prime Minister's spokesman said on Tuesday that No 10 had been
"surprised" by the report suggesting that Gordon Brown was considering a
ban. ...

Jul 15 '08 #5

P: n/a
On 15 Jul, 04:02, Adam Smith <adamsm...@econ.comwrote:
Andy Dingley wrote:
On Mon, 14 Jul 2008 13:22:48 -0700, Adam Smith <adamsm...@econ.com>
wrote:
The example I should have included was
http://www.msn.com/
You might also find this helpful
http://codesmiths.com/dingbat/lj/usenet/pullquote/

Was this link the intended target ? it showed
ref Usenet alt.html
Yes. Obviously (this being a Usenet geek group) I meant "read the
source code", not "read the visible lorem ipsum text"!
Jul 15 '08 #6

This discussion thread is closed

Replies have been disabled for this discussion.