Maintaining page flow with right column

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • johkar
    #1

    Maintaining page flow with right column

    My right column content is created dynamically by an application so it
    will vary in height. When the main content of the page takes up more
    vertical space than the rigth column, I want the content to flow under
    the right column (much like adding a picture and floating it right).
    The problem is that the only way I can figure out how to make that
    happen is to output the right column HTML before the main content.

    This takes the right column out of the normal page flow, meaning that
    if you removed all CSS, the page structure would be out of whack
    because the right column would appear before the main body content...or
    if a screen reader were reading the page, it would be off.

    Is there a way with CSS to output the right column content after the
    main body content so the page flow is correct? Page sample below.

    John

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitl ed Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <style type="text/css">
    ..mainbody {width:600px; border:1px solid #000;}
    ..rightcol { float:right; width:150px; margin:5px; border: 2px solid
    #ff0000;}
    </style>
    </head>
    <body>
    <div class="mainbody ">
    <div class="rightcol ">
    <div class="rightcol box">
    <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    </ul>
    </div>
    </div>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text
    Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text Text
    Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text Text
    Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text Text
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text Text</p>
    </div>
    </body>
    </html>I

    Tags: None
    • AndrewF
      #2
      Re: Maintaining page flow with right column

      Hi Johkar,

      Don't worry, you aren't going mad, the browser is just behaving how it
      is told to rather than necessarily how you'd like it to.

      Basically, floating only occurs at the point where an item starts.

      So when you put the right colum before the P tags you basically telling
      the item to float, and any content that comes *after* it should wrap
      around to the left.

      When you put the right column stuff at the bottom, after the P tags and
      you float it, there is nothing else following so there is nothing
      floated past it.

      Try it with a standard image tag and put a float on it or even
      ALIGN=left or right and it will do the same thing.

      I guess the reason for this is that 99% of the time you declare one
      thing as being static and what follows is to wrap around it.

      The only solution I could think of was to reduce the width of the P tag
      so the div then popped up into the space that was left when you floated
      it. The problem with this is that you won't get any wrapping, just a
      trench down one side of your page... this then turns into a pretty
      standard 2-column layout though.

      Unless there was a serious design issue, I'd probably go down this
      route if you are thinking accessibility - text wrapping around text
      isn't always the nicest thing to look at and decipher anyway...
      >From what I understand of the float behaviour though, what you are
      trying to do can't be done simply by just floating alone.

      Cheers
      AndrewF

        Comment

        • johkar
          #3
          Re: Maintaining page flow with right column


          AndrewF wrote:
          Hi Johkar,
          >
          Don't worry, you aren't going mad, the browser is just behaving how it
          is told to rather than necessarily how you'd like it to.
          >
          Basically, floating only occurs at the point where an item starts.
          >
          So when you put the right colum before the P tags you basically telling
          the item to float, and any content that comes *after* it should wrap
          around to the left.
          >
          When you put the right column stuff at the bottom, after the P tags and
          you float it, there is nothing else following so there is nothing
          floated past it.
          >
          Try it with a standard image tag and put a float on it or even
          ALIGN=left or right and it will do the same thing.
          >
          I guess the reason for this is that 99% of the time you declare one
          thing as being static and what follows is to wrap around it.
          >
          The only solution I could think of was to reduce the width of the P tag
          so the div then popped up into the space that was left when you floated
          it. The problem with this is that you won't get any wrapping, just a
          trench down one side of your page... this then turns into a pretty
          standard 2-column layout though.
          >
          Unless there was a serious design issue, I'd probably go down this
          route if you are thinking accessibility - text wrapping around text
          isn't always the nicest thing to look at and decipher anyway...
          >
          From what I understand of the float behaviour though, what you are
          trying to do can't be done simply by just floating alone.
          >
          Cheers
          AndrewF
          Thank you for the reply Andrew. You are correct in it being an
          accessiblity issue. A normal right column takes up space down the
          entire right side of the page whether there is content in it or not.
          We are under some pressure to allow wrapping after the right column
          content ends. We are still arguing the accessibliity and degradation
          issues of doing so.

          John

            Comment

            Previous template Next
            Working...