3 columns, order in text browsers

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Mike Lepore - 27 Jul 2006 23:33 GMT

Please tell me how to put web content into three percentage-defined columns
when seen in a graphical browser, but so that a text-based browser will see
the
middle column first. I'm guessing I need CSS to allow me to type the HTML
file
in this order:
<div class="middle">content of the middle 60 percent</div>
<div class="left">content of the left 20 percent</div>
<div class="right">content of the right 20 percent</div>

Thank you for your time -- Mike Lepore -- lepore , at - bestweb , dot - net

Reply to this Message

Beauregard T. Shagnasty - 28 Jul 2006 02:12 GMT

> Please tell me how to put web content into three percentage-defined
> columns when seen in a graphical browser, but so that a text-based
> browser will see the middle column first. I'm guessing I need CSS to
> allow me to type the HTML file in this order:

Something like this?

http://benmeadowcroft.com/webdev/csstemplates/3-column.html

Signature

-bts
-Warning: I brake for lawn deer

Reply to this Message

Mike Lepore - 31 Jul 2006 07:12 GMT

>> Please tell me how to put web content into three percentage-defined
>> columns when seen in a graphical browser, but so that a text-based
[quoted text clipped - 3 lines]
>
> http://benmeadowcroft.com/webdev/csstemplates/3-column.html

True, the HTML for that page does have the text for the middle column appear
first,
but what lines in the style sheet do it? The style sheets that go with that
page are mostly
concerned with margins, padding, borders, etc. I can't find in there the
answer to
my question. This is all I need:

<div class="middle">content of the middle 60 percent</div>
<div class="left">content of the left 20 percent</div>
<div class="right">content of the right 20 percent</div>

Reply to this Message

Chris F.A. Johnson - 31 Jul 2006 08:19 GMT

>>> Please tell me how to put web content into three percentage-defined
>>> columns when seen in a graphical browser, but so that a text-based
[quoted text clipped - 13 lines]
><div class="left">content of the left 20 percent</div>
><div class="right">content of the right 20 percent</div>

.left {
position: absolute;
top: 5em;
left: 0;
width: 20%;
}

.right {
position: absolute;
top: 5em;
right: 5px;
width: 20%;
padding: 0;
}

.middle {
position: absolute;
top: 5em;
right: 20%;
padding: 1em;
left: 20%;
}

Signature

Chris F.A. Johnson, author <http://cfaj.freeshell.org>
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
===== My code in this post, if any, assumes the POSIX locale
===== and is released under the GNU General Public Licence

Reply to this Message

Martin Eyles - 31 Jul 2006 09:22 GMT

>>>> Please tell me how to put web content into three percentage-defined
>>>> columns when seen in a graphical browser, but so that a text-based
[quoted text clipped - 36 lines]
> left: 20%;
> }

Nice layout, but I can see a potential problem with it. If someone wanted to
add a footer below all three columns, this layout would not work. This is
because the absolute positioning would make the content and side-bars take
up no space in the normal flow of the page. Is there a modification that can
be made to allow these footers and still keep the content first in the HTML?

Thanks,
Martin

Reply to this Message

Beauregard T. Shagnasty - 31 Jul 2006 14:21 GMT

> Nice layout, but I can see a potential problem with it. If someone
> wanted to add a footer below all three columns, this layout would not
> work. This is because the absolute positioning would make the content
> and side-bars take up no space in the normal flow of the page. Is
> there a modification that can be made to allow these footers and
> still keep the content first in the HTML?

Link on the left of the original page I mentioned, goes to:
<http://benmeadowcroft.com/webdev/csstemplates/3-column-with-footer.html>

Signature

-bts
-Warning: I brake for lawn deer

Reply to this Message

Martin Eyles - 31 Jul 2006 15:20 GMT

>> Nice layout, but I can see a potential problem with it. If someone
>> wanted to add a footer below all three columns, this layout would not
[quoted text clipped - 5 lines]
> Link on the left of the original page I mentioned, goes to:
> <http://benmeadowcroft.com/webdev/csstemplates/3-column-with-footer.html>

Sorry, didn't read the page, just went straight to the HTML structure and
CSS.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2006

3 columns, order in text browsers