SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    May 2004
    Posts
    512
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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!

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <div id="ContentArea">
    <div id="ContentBody">
    {page content}
    </div>
    <div id="RightMenu">
     {sidebar menu}
    </div>
    </div>
    <div id="LeftColumnAds">
    {skyscraper banner ads}
    </div>
    CSS
    Code:
    #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 ).
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    SitePoint Evangelist
    Join Date
    May 2004
    Posts
    512
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your reply!

    Quote Originally Posted by KLB
    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.

  4. #4
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  5. #5
    SitePoint Evangelist
    Join Date
    May 2004
    Posts
    512
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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
    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.

  6. #6
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pixelcop
    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.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  7. #7
    SitePoint Evangelist
    Join Date
    May 2004
    Posts
    512
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KLB
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •