Challenging Layout, Image floated across 1.5 columns.

[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...


...A bit of text...


...A bit 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.

Thanks.

[TheDoc]

The only thing I’ve got you need to know the image’s height for. http://jsfiddle.net/2Csgq/ 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.

Thanks!

[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.

Thanks!

[joshuanhibbert]

Keeping your source order, here is how I would do it: http://jsfiddle.net/sl1dr/25kQs/

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.

[Author]

Posts