Title: ? about container nesting w/i post
Last modified: August 18, 2016

---

# ? about container nesting w/i post

 *  [nmallory](https://wordpress.org/support/users/nmallory/)
 * (@nmallory)
 * [20 years, 10 months ago](https://wordpress.org/support/topic/about-container-nesting-wi-post/)
 * 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](http://nmallory.exit-23.net) 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)

 *  [kickass](https://wordpress.org/support/users/kickass/)
 * (@kickass)
 * [20 years, 10 months ago](https://wordpress.org/support/topic/about-container-nesting-wi-post/#post-231157)
 * 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](http://wellstyled.com/css-photo-cards.html)
 * I hope this helps!
 *  Thread Starter [nmallory](https://wordpress.org/support/users/nmallory/)
 * (@nmallory)
 * [20 years, 10 months ago](https://wordpress.org/support/topic/about-container-nesting-wi-post/#post-231163)
 * [Here](http://nmallory.exit-23.net/20050707/this-will-never-end) 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.
 *  [kickass](https://wordpress.org/support/users/kickass/)
 * (@kickass)
 * [20 years, 10 months ago](https://wordpress.org/support/topic/about-container-nesting-wi-post/#post-231206)
 * 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](https://wordpress.org/support/users/nmallory/)
 * (@nmallory)
 * [20 years, 10 months ago](https://wordpress.org/support/topic/about-container-nesting-wi-post/#post-231210)
 * Actually, that does what I’m already doing.
 * [Here’s](http://phrogz.net/CSS/quotefloat2.html) 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](https://wordpress.org/support/users/nmallory/)
 * (@nmallory)
 * [20 years, 10 months ago](https://wordpress.org/support/topic/about-container-nesting-wi-post/#post-231211)
 * 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.
 *  [schulte](https://wordpress.org/support/users/schulte/)
 * (@schulte)
 * [20 years, 10 months ago](https://wordpress.org/support/topic/about-container-nesting-wi-post/#post-231212)
 * See [http://wordpress.org/support/topic/35754](http://wordpress.org/support/topic/35754)
 *  Thread Starter [nmallory](https://wordpress.org/support/users/nmallory/)
 * (@nmallory)
 * [20 years, 10 months ago](https://wordpress.org/support/topic/about-container-nesting-wi-post/#post-231219)
 * 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.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 7 replies
 * 3 participants
 * Last reply from: [nmallory](https://wordpress.org/support/users/nmallory/)
 * Last activity: [20 years, 10 months ago](https://wordpress.org/support/topic/about-container-nesting-wi-post/#post-231219)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics