Forums

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

Home Forums CSS Photo Thumbnails in Margins – ABS Position Woes

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #32061
    travelvice
    Member

    Howdy!

    I’m kicking off an overhaul of my travelogue, have encountered a bit of a technical snag, and was hoping for a little extra brain power on the subject.

    The objective is the move photo thumbnails in the posts that were previously floated to the left and right, with the text wrapping around them, to a center column of text with the thumbnails in the margins.

    Here’s a quick visual: http://i.imgur.com/Wv415.png

    Each photo is wrapped in a < div > tag — < div class="photo-right" > < div class="photo-left" > — mixed in with the < p > tags that make up the paragraphs.

    So, the easy solution to this is to absolutely position thumbnail with a +/- to its margin depending on left/right placement. And that would be fine… except that I’ve got large centered photos on short paragraphs that will very likely end up overlapping with some of the longer vertical thumbnails in the margins. This is a problem: http://i.imgur.com/coa8Q.png

    I don’t currently know of a way to clear an absolutely positioned image — perhaps you’ve got a better suggestion?

    #55160
    travelvice
    Member

    Hi — The result of this is pretty promising (http://i.imgur.com/LrI1r.png), but an issue is that I can only apply margin-right and padding-right to the floated right thumbnail to push it into its proper position…. and the thumbnails vary in width. Mostly it’s 200px, but sometimes it’s smaller or larger by 50px or so.

    The concept is to always keep the left and right margin images (and sometimes sidenotes) always flush to the body of text, with a 15px gutter between the text and margin elements.

    The centered images will sometimes grow up to 970px, so the content container must accommodate.

    Thoughts?

    #55151
    travelvice
    Member

    Now that is pretty damn smart! Works as expected (should this situation occur)!
    http://imgur.com/8yMnQ.png

    Thank you for the extra brain power on this one.

    #55107
    travelvice
    Member

    Indeed! Already done — that was just proof of concept I was working up there, nothing fancy to look at. :D

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