The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Challenging Layout, Image floated across 1.5 columns.

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #35501
    Mark Root-Wiley

    I’ve got a nasty layout that I’m really stuck on and looking for any brilliant ideas to get me going.

    The layout I’m going for is this: Layout Diagram.

    I can get this layout working by changing the source order, but I’m looking for a pure-CSS way to do this.

    For me, the ideal source order would be:

    ...Lots of text...

    I’m open to using a wrapper on the sidebar if needed (around multiple asides). I will also need to put a wrapper around the , but have left it out of the example. I’m going for the simplest markup possible and then expanding it once I have the basics down.

    I’ve tried variants on absolute faux positioning but can’t get that working. I also looked at masonry.js but I don’t think that’s the right solution either. I wonder whether using a technique inspired by the float:center technique on this blog might work.

    Any and all suggestions welcome.



    The only thing I’ve got you need to know the image’s height for. You’d probably be able to get the height of the image using some jQuery.

    Something like the float center thing could work I think, would just need to tinker.

    Mark Root-Wiley

    That seems as good as anything I can expect. I’m using WordPress, so I should be able to get the height of the image server-side, which is a nice consolation prize.


    Mark Root-Wiley

    (I should add that if other people have other ideas/solutions, I’d still love to see them. I like the layout but it seems like one that’s not all that CSS-friendly.)

    Mark Root-Wiley

    The specifics barely matter, but here they are.
    container: 940
    article: 620
    asides: 300
    image: 540
    (gutter: 20)

    Mark Root-Wiley

    That is the right layout. I see that on #aside-wrap, though, you use absolute positioning. Unfortunately, I need to let the sidebar have a variable height that the rest of the page pays attention it. (That also means the float:right on #aside-wrap isn’t doing anything.)

    TheDoc’s answer worked nicely and I’m pretty much using that solution.



    Keeping your source order, here is how I would do it:

    I would personally have the image as a child of the article though.

    Mark Root-Wiley

    I like the way you illustrated that, Joshua.

    I think my big oversight was not considering putting the image inside the article. Doing that seem to work beautifully!

    Thanks to everyone who contributed.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.