• I know this isn’t really WordPress specific though I am trying to do it in my post output on my WordPress blog. I’ve tried googling for an answer but haven’t come up with anything that actually answers my question and I know there are a lot of CSS smarties here.

    So, what I’m trying to figure out is how to float a nested element/container to the right so it’s flush with the right side of the post but the text wraps around it BUT also push it down from the top so it shows up in the middle of the post on the right side. Does that make sense?

    Maybe it can’t be done. I’ve tried float: right and I’ve tried absolute, relative, and fixed positioning but I don’t think I’m doing them correctly or I just don’t get how they work or something.

    You can see where I’ve floated a google ad to the right of the full posts at The Naked Truth but it’s in the top right corner instead of further down, where I’d like it to be.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must have changed it since you posted this, at least the way I understand it.

    Okay, a thumbnail sketch of “floating” in css. When you float anything in css it will float the direction you point it and UP to the top of whatever container contains it, and that container must be cleared. OR it’ll float up until it bumps the bottom of another block level element. So the trick with floating is to wrap the floated element within a wrapping container of some sort, so that the top of the float will be where you want it, OR to place the div in the html so that the float will butt only up as far as the block level element above it (like a paragraph.)

    This is an article with a method to create a float container. I’ve used this method for both text boxes and for images with captions, and it works well. *important!* Make sure to set a width on anything you float. That width can be either in pixels, ems or percent (and that’ll be percent of its container!)

    http://wellstyled.com/css-photo-cards.html

    I hope this helps!

    Thread Starter nmallory

    (@nmallory)

    Here is a post that represents what I’m talking about. See how the ad is floated to the right but it flush with the top of the content of the post? I would like to find a way to push the ad down 50 – 100px or 50% of the height of the content and still have the content wrap around it.

    And like I said, maybe there’s no way to do that.

    I’m thinking that method will work. You just have to very carefully place the div for the “photo-card” just before the php call for the content of the post, which, in the single.php page, is <?php the_content('more_link_text', strip_teaser, 'more_file'); ?> or similar. The div will be for card-right. Make sure to define a width for card-right in your css.

    Let me know how that works.

    Thread Starter nmallory

    (@nmallory)

    Actually, that does what I’m already doing.

    Here’s an example of an what I want with it floating in the middle of the paragraph on one side, but I can’t seem to get their code to work with the WordPress code. Probably somthing to do with the_content( ) which I will look further into.

    Thread Starter nmallory

    (@nmallory)

    OK I know why that code isn’t working but I don’t know how to fix it. the_content() puts a <p> in front of the first sentence, making it a seperate paragraph from the <q> paragraph.

    Thread Starter nmallory

    (@nmallory)

    Thanks for the link schulte, but that strips all paragraph formatting out apparrently and unless I only plan to write one paragraph per post, that’s not quite what I want to do.

    This has definitely become an interesting challenge.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘? about container nesting w/i post’ is closed to new replies.