Swap two columns

I have a two column layout - this is the regular story about a sidebar
and a column containing the main content.

In the HTML source I've put the main content div first and the sidebar
div second - This is an important point. I do this because I would
like the main content of the site to be at the top of the HTML source
(to please screen readers and search bots)

But in the browser I would like to show the sidebar to the left of the
main content.

How do I achieve this?

If you use the Firefox Developer Toolbar and can edit CSS "run-time",
you can see/use the example page here:
http://tws.name/resources/2008/02/sw...-elements.html
(out-of-the-box the two columns are just rendered in their normal
flow, I've done no effort to render the sidebar to the left, since I'm
totally out of ideas)

/thomas

In article
<c71df75a-de9f-46c2-a3c1-add28f918faf (AT) c4g2000hsg (DOT) googlegroups.com>,
Thomas Watson <w (AT) tson (DOT) dk> wrote:

I have a two column layout - this is the regular story about a sidebar
and a column containing the main content.

In the HTML source I've put the main content div first and the sidebar
div second - This is an important point. I do this because I would
like the main content of the site to be at the top of the HTML source
(to please screen readers and search bots)

But in the browser I would like to show the sidebar to the left of the
main content.

How do I achieve this?

The following style sheet does this, for both 2- and 3-column
layouts:
http://webhost.bridgew.edu/etribou/l.../skidoo_redux/

Check out some of the other layouts on that site too - very
useful!

Thomas Watson wrote on 14 feb 2008 in
comp.infosystems.www.authoring.stylesheets:

I have a two column layout - this is the regular story about a sidebar
and a column containing the main content.

In the HTML source I've put the main content div first and the sidebar
div second - This is an important point. I do this because I would
like the main content of the site to be at the top of the HTML source
(to please screen readers and search bots)

But in the browser I would like to show the sidebar to the left of the
main content.

How do I achieve this?

Float the main div to the right.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

On Feb 14, 2:49 pm, "Evertjan." <exjxw.hannivo... (AT) interxnl (DOT) net> wrote:

Float the main div to the right.

I want the main column to be as far left as possible, only of cause
leaving room for the left sidebar. The problem with the float:right
solution is that the main column then goes all the way to the right of
the browser viewport.

I guess this could be handled by giving the main column a fixed size,
but with a layout that increases horizontally depending on the users
browser size this is unfortunately not possible.

/thomas

On Feb 14, 1:42 pm, David Stone <no.em... (AT) domain (DOT) invalid> wrote:

The following style sheet does this, for both 2- and 3-column
layouts:
http://webhost.bridgew.edu/etribou/l.../skidoo_redux/

Check out some of the other layouts on that site too - very
useful!

Thanks a lot... This is what I'm looking for.

Just a few questions:

I see that you use three nested div-containers around all your
columns. How come a single doesn't do the trick?

I've tried to mimic your code, with only two columns here:
http://tws.name/resources/2008/02/sw...elements2.html
I've color-coded the three containers. If I remove the CSS for the two
inner once, it seems stil to work. Are they necessary?

/thomas

In article
<6af0d5c9-5148-48a4-bace-2ec1ae290068 (AT) i12g2000prf (DOT) googlegroups.com>,
Thomas Watson <w (AT) tson (DOT) dk> wrote:

On Feb 14, 1:42 pm, David Stone <no.em... (AT) domain (DOT) invalid> wrote:
The following style sheet does this, for both 2- and 3-column
layouts:
http://webhost.bridgew.edu/etribou/l.../skidoo_redux/

Check out some of the other layouts on that site too - very
useful!

Thanks a lot... This is what I'm looking for.

Just a few questions:

I see that you use three nested div-containers around all your
columns. How come a single doesn't do the trick?

It's not actually my code - I've used it, as well as modified
versions, but I didn't come up with it. Some of the nesting
is needed to give the look of panels having 1 pixel borders,
spaced slightly apart; it could probably be simplified if you
want either solid panels, or panels with borders that meet
without the added margins.

I've tried to mimic your code, with only two columns here:
http://tws.name/resources/2008/02/sw...elements2.html
I've color-coded the three containers. If I remove the CSS for the two
inner ones, it seems stil to work. Are they necessary?

Don't know. If you want to compare, here's how I used the same
starting code to get a two column layout:

http://www.chem.utoronto.ca/courseno...liography.html

which uses

..../stats/css/two-column.css
..../stats/css/rmenu.css
..../css/stats-common.css

I'm slowly getting a better understanding of the CSS and how it works;
some of it is included to make the layout work with IE 5 & 6, as well
as IE:Mac 5.x and other early browsers. I restricted my concerns mostly
to IE >= 6, FF >=2, and Safari >=2.

Thomas Watson wrote:

On Feb 14, 1:42 pm, David Stone <no.em... (AT) domain (DOT) invalid> wrote:

http://webhost.bridgew.edu/etribou/l.../skidoo_redux/

I've tried to mimic your code, with only two columns here:
http://tws.name/resources/2008/02/sw...elements2.html

FYI, I have simplified Ruthsarian templates you may be interested in.
http://www.bergamotus.ws/samples/2co...h-borders.html

--
Berg

On Feb 14, 5:41 pm, David Stone <no.em... (AT) domain (DOT) invalid> wrote:

I'm slowly getting a better understanding of the CSS and how it works;
some of it is included to make the layout work with IE 5 & 6, as well
as IE:Mac 5.x and other early browsers. I restricted my concerns mostly
to IE >= 6, FF >=2, and Safari >=2.

I'll do a couple of tests across browsers and see what the minimum
requirements are...

@berg: Thnx for the simplified version

I've created a 3rd version of the test page with the result:
http://tws.name/resources/2008/02/sw...elements3.html

I'm using an empty div at the bottom of the container that has a
clear:both rule. This is not important in this simple example, but if
you have an outer container that needs to graphically wrap the entire
container and its divs you need this to make the outer container
follow the flow of the columns.

This solves my first issue. But I actually have a second related one:
How do I make the left column variable in width?

I've created another example page that in the left column has a series
of tabs. The tabs can be of variable width and I don't know the number
of tabs. Just to the right of the tabs I have the main/right column.
This column needs to flow naturally after the last tab. In the below
example I've set the left column to a fixed width of 400px - how do I
make it variable?
http://tws.name/resources/2008/02/tabs-with-text2.html

Thanks for all your help

/thomas

In article
<c71df75a-de9f-46c2-a3c1-add28f918faf (AT) c4g2000hsg (DOT) googlegroups.com

,
Thomas Watson <w (AT) tson (DOT) dk> wrote:

I have a two column layout - this is the regular story about a sidebar
and a column containing the main content.

In the HTML source I've put the main content div first and the sidebar
div second - This is an important point. I do this because I would
like the main content of the site to be at the top of the HTML source
(to please screen readers and search bots)

But in the browser I would like to show the sidebar to the left of the
main content.

How do I achieve this?

With difficulty and complication. Just look at what has been
offered to you in response, tricks and tricks galore.

How strong is this argument about pleasing screen readers and
search bots? So simple is it to put the nav first in the html,
width it, float it left, margin-left the main by about the width
of the nav and let Bob be your uncle, that the argument better be
pretty strong indeed.

--
dorayme

In article
<ci3tj.601889$kj1.489498 (AT) bgtnsc04-news (DOT) ops.worldnet.att.net>,
"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote:

dorayme wrote:

So simple is it to put the nav first in the html,

Seems to be equally simple to put the content first in the html... :-)

and let Bob be your uncle

Oh! In that case, proceed as desired.

It is dead simple to do this in the html. I think it is trickier
when it comes to the css and cross browser. I was just wanting to
make the point that the argument for so doing should be pretty
strong.

--
dorayme