Swap two columns

[Thomas Watson]

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

[David Stone]

In article
<c7**********************************@c4g2000hsg.g ooglegroups.com>,
Thomas Watson <[e-mail]:

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!

[Evertjan.]

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)

[Thomas Watson]

On Feb 14, 2:49 pm, "Evertjan." <[e-mail]:

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

[Thomas Watson]

On Feb 14, 1:42 pm, David Stone <[e-mail]:

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

[Thomas Watson]

On Feb 14, 5:41 pm, David Stone <[e-mail]:

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

[dorayme]

In article
<c7**********************************@c4g2000hsg.g ooglegroups.com

>,

Thomas Watson <[e-mail]:

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

[Thomas Watson]

On Feb 14, 10:46 pm, dorayme <[e-mail]:

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.

The other posters actually helped me a lot... I have to areas where
this is an issue. One where I have the regular two column layout -
this is now fixed. But I was just wondering if I could use this new
input to also solve another problem that I've been having: Where I
need a text to flow just after the last tab, as explained.

/thomas

[dorayme]

In article
<6e**********************************@s12g2000prg. googlegroups.co
m>,
Thomas Watson <[e-mail]:

On Feb 14, 10:46 pm, dorayme <[e-mail]:

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.

The other posters actually helped me a lot... I have to areas where
this is an issue. One where I have the regular two column layout -
this is now fixed. But I was just wondering if I could use this new
input to also solve another problem that I've been having: Where I
need a text to flow just after the last tab, as explained.

Perhaps I was a bit harsh about what you have been offered in the
context of simple cases. Perhaps a more detailed url of what you
are wanting might be useful to determine the relative merits of
things.

Not sure what you are asking in the last bit, last tab? Maybe my
newsreader is not getting up all the posts in the thread?

--
dorayme

[Wes Groleau]

Thomas Watson 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.

I am not a CSS expert, not even close.
But for what it's worth, at
http://www.NorthwestAllenTrails.org/
I have the main content preceding the nav bar in the HTML,
but the sidebar stays on the left.

--
Wes Groleau

Ostracism: A practice of sticking your head in the sand.