ansaurus

Question

Right-floated sidebar with main content flowed around - how?

Answer 1

+2 A:

I believe you're gonna have to change the order for this, putting the sidebar first. Then, use CSS's float property (without changing order, div#sidebar would end up below the paragraphs vs next to them). div#sidebar should stretch as needed for height.

CSS:

#sidebar {
    float: right;
    width: 50px;
}

HTML:

<body>
  <div id="content">
    <div id="sidebar">
      /* has some form of fixed width */
    </div>

    <!-- paragraphs -->
  </div>
</body>

@Jon Cram [comment]

Ok...nvm. You stated your own answer and rejected it at the same time.

You can't float an element around other elements that are defined before it. The browser has to be able to answer "float around what?" And it looks to the next element to start, continuing as far as necessary.

Jonathan Lonowski 2008-11-06 09:57:30

Sorry, please see the requirements: the sidebar must not precede the main content in the markup.

Jon Cram 2008-11-06 10:01:40

Answer 2

+1 A:

If you can rearrange your HTML so the sidebar is before the content, then this is easy:

#sidebar { float: right; width: 150px; }

.. and then just make sure to clear it afterwards (at the end of the #content div).

I know your intentions are in the right place, serving the content in the right order, but unless you're expecting a lot of traffic from visually impaired users, then I think you might need to reconsider your priorities.

nickf 2008-11-06 10:01:22

Cheers Nick - I appreciate you considering my intentions in your answer. Having the sidebar in the markup before the content is really not good for me. I'd rather have the sidebar after the content and not have the content wrap nicely.

Jon Cram 2008-11-06 10:08:21

Answer 3

+1 A:

Ok, here's another answer then, since we can ignore one of the requirements, skip out the first requirement where the content wraps underneath the sidebar.

#sidebar {
  float: left;
  width: 100px;
}
#actualContent {
  width: 700px;
  float: left;
}

The only change to your code is that you have to put your actual content in another wrapper.

<div id="content">
    <div id="actualContent">
        <p>...</p>
        <p>...</p>
    </div>
    <div id="sidebar">
        <p>...</p>
    </div>
</div>

nickf 2008-11-06 10:10:03

Answer 4

A:

To my knowledge, the only way of getting the sidebar where you want (without the obvious markup reordering) is to set #content { position: relative; } and #sidebar { position: absolute; right: 0; top: 0; }

Unfortunately, absolute positioning will take the sidebar out of the flowing layout and the content of #content will not avoid #sidebar as you desire.

Richard Poole 2008-11-06 10:10:18

Answer 5

A:

I don't have anywhere to test it right now, and I'm not sure if it will work, but have you tried displaying the sidebar div as inline and going from there?

Gabe 2008-11-06 10:47:32

Thanks for the suggestion Gabe - tried but to not avail.

Jon Cram 2008-11-06 11:29:37

Answer 6

+1 A:

Simple floating w/ opposite source order just can't be done (w/o CSS3 draft specs). The pragmatic approach is to first build a nice layout that supports your desired source order. HTML:

<div id="content" class="noJs">
  <div id="floatSpace"></div>
  <p>Lorem ipsum ....</p>
  <p>Pellentesque ....</p>
  <div id="sidebar">content</div>
</div>

CSS:

#content {position:relative;}
#sidebar {width:150px; position:absolute; top:0; right:0;}
.noJs {padding-right:150px;}
.noJs #floatSpace {display:none;}
.js #floatSpace {float:right; width:150px;}

This satisfies all but 1 and 2. Now, we add the JS:

$(function () {
  // make floatSpace the same height as sidebar
  $('#floatSpace').height($('#sidebar').height());
  // trigger alternate layout
  $('#content')[0].className = 'js';
});

This will make the contents float around #floatSpace, and #sidebar will remain positioned on top of it. This is better than moving #sidebar because source order remains the same (for screenreaders that support Javascript, etc.).

mrclay 2008-11-06 14:17:17

ansaurus

tags:

views:

answers:

Right-floated sidebar with main content flowed around - how?

related questions