Responsively word wrapping content around a sidebar

[solarized]

Hi all,

Is it possible to responsively word wrap content around a side bar?

I’ve tried to create a demo here: http://codepen.io/jcskyrock/pen/xiFLH

Would like it if the the content text wrapped underneath the sidebar. Whilst maintaining the nice responsive TB functionality of moving the sidebar underneath the content on small screens.

[wolfcry911]

Is the height of the sidebar static or dynamic? Solution is simple if it’s static, but I’m guessing it’s dynamic…

[solarized]

Yup, ‘fraid so. Dynamic sidebar for sure.

[wolfcry911]

Here’s a solution with jquery and media queries (could be done with just jquery).
http://codepen.io/wolfcry911/full/CLjIs

[solarized]

Beautiful!

[wolfcry911]

I should note that that is but one way. You could also position: absolute the sidebar and use jquery to calculate the needed -bottom length.

edit// I just realized this can be done without jquery using top: 100%

http://codepen.io/wolfcry911/full/CLjIs

[Merri]

I’ll throw a challenge: what if I wanted the sidebar to be after the content in HTML? (I’m working on it myself right now, but my JavaScript is on the rusty side so it’s slow progress to make it solid enough. Could account for dynamic element size changes…)

**Edit!**
http://codepen.io/Merri/full/yGKCJ

[solarized]

Oh man, some great solutions. Thanks!

[solarized]

@wollfcry911, do you have an example of the position: absolute idea without jQuery?

[wolfcry911]

Sorry about that – my second link above was meant to be this:

http://codepen.io/wolfcry911/full/cCrDs

[Merri]

The downside is that you can’t have any other element neatly under the container as the absolutely positioned element would go on top of it. So you’d be limited to defined height to make sure whatever comes after the container would be visually accessible.

[solarized]

Thanks, wolfcry911!

[Author]

Posts