Grow your CSS skills. Land your dream job.

Responsively word wrapping content around a sidebar

  • # March 9, 2013 at 9:25 am

    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.

    # March 9, 2013 at 12:58 pm

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

    # March 9, 2013 at 3:26 pm

    Yup, ‘fraid so. Dynamic sidebar for sure.

    # March 9, 2013 at 4:01 pm

    Here’s a solution with jquery and media queries (could be done with just jquery).

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

    # March 9, 2013 at 4:04 pm

    Beautiful!

    # March 9, 2013 at 4:39 pm

    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

    # March 9, 2013 at 5:19 pm

    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

    # March 9, 2013 at 8:33 pm

    Oh man, some great solutions. Thanks!

    # March 10, 2013 at 5:58 am

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

    # March 10, 2013 at 9:55 am

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

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

    # March 10, 2013 at 12:33 pm

    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.

    # March 10, 2013 at 1:07 pm

    Thanks, wolfcry911!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".