nested float: float sidebar, but put contents before sidebar in markup

[pixelcop]

Maybe, this is just impossible to do, but I would like to make sure that I am not missing s.th. obvious.

I would like to

• create a nested float similar to this layout.
• have the main contents float around the sidebar (I don't want to create 2 columns), but I also would like to put the main contents before the sidebar in the XHTML markup.

This means, I have to float the sidebar right and give it a width. The problems with this is that the floated element has to appear first in the markup.

Also, I can't float the contents (then it would appear before the sidebar in the markup), because then I would have to give it a width and it would not flow around the navigation (I had 2 columns in this case).

Absolute positioning lets me have the contents befor the sidebar in the markup, but also creates 2 columns and doesn not let the contents flow around the sidebar.

Is this just impossible?

Thanks a lot for your comments!

[KLB]

I did exactly what you asked on my chemistry site. Both sidebars (left-hand ads and right-hand menu) show up after the page content in the source code. My method was as follows:

HTML

<div id="ContentArea">
<div id="ContentBody">
{page content}
</div>
<div id="RightMenu">
 {sidebar menu}
</div>
</div>
<div id="LeftColumnAds">
{skyscraper banner ads}
</div>

CSS

#ContentArea{width:608px;display:inline;float:right;clear:right}
#ContentBody{width:440px;float:left;display:inline;clear:left}
#RightMenu{display:inline;float:right;width:160px;clear:right}
#LeftColumnAds{width:160px;float:left;clear:left;display:inline;Overflow:hidden}

Some drawbacks to my fixed column width method deals with font sizes. I found that IE started really flaking out if the user set Windows monitor DPI to 120 instead of the standard 96. My solution was to hide the overflow from my left-hand banner ads. To deal with IE's other bad behavior in regards to changing font sizes (problems that Opera and Firefox did not have) I switched all measurements including fonts to pixels.

Even with that, I have to be extremely careful that all graphics and data tables fit within my 460px content area, otherwise the content area will slide under the left-hand banner ads on MSIE (other browsers do not have this problem ).

[pixelcop]

Thanks a lot for your reply!

Even with that, I have to be extremely careful that all graphics and data tables fit within my 460px content area, otherwise the content area will slide under the left-hand banner ads on MSIE (other browsers do not have this problem ).

That's exactly what I want! I would like the main contents to slide under the sidebar where the sidebar ends. In this case, I could not manage to have the main contents before the sidebar in the markup. I can't float the contents (then it would appear before the sidebar in the markup), because then I would have to give it a width and it would not slide under the sidebar (I had 2 columns in this case).

If I use columns similar to your chemistry site (not have the contents slide under the sidebar, but have "real" columns), this is no problem.

[KLB]

I think we are using the phrase "slide under" to mean two different things, in my case I should have used slide behind (e.g. hidden), where as you mean you want the text to wrap around the menu when the menu ends. I tried to accomplish this, but ran into all kinds of nasty side effects I didn't like. Thus I opted to stick to a pure three column layout

[pixelcop]

I think we are using the phrase "slide under" to mean two different things, in my case I should have used slide behind (e.g. hidden), where as you mean you want the text to wrap around the menu when the menu ends. I tried to accomplish this, but ran into all kinds of nasty side effects I didn't like. Thus I opted to stick to a pure three column layout

Your are right - I mean "wrap around" similar to this layout.
The layout itself is easy to accomplish, I just can't put the main contents first in the markup.

[KLB]

The layout itself is easy to accomplish, I just can't put the main contents first in the markup.

I looked at it from an accessiblity standpoint. I really wanted to make my site more usable by hand held devices and more accessible by the blind. I found I had my choice between putting the menu first and allowing text to wrap neatly, or putting content first and making my site more accessible--I chose the latter.

From an SEO standpoint, I also felt it was important that the menus and vertical ads came last on the page. Although I end up with extra whitespace, I don't think it really detracts from the look of my site.

[pixelcop]

I looked at it from an accessiblity standpoint. I really wanted to make my site more usable by hand held devices and more accessible by the blind. I found I had my choice between putting the menu first and allowing text to wrap neatly, or putting content first and making my site more accessible--I chose the latter.

From an SEO standpoint, I also felt it was important that the menus and vertical ads came last on the page. Although I end up with extra whitespace, I don't think it really detracts from the look of my site.

You are of course right with both points. I'll consider using the "faux colums" which allow me to cover both points - accessibility and SEO.

Thanks again!