Title: CSS Float moved up inside loop
Last modified: August 18, 2016

---

# CSS Float moved up inside loop

 *  [Lorelle](https://wordpress.org/support/users/lorelle/)
 * (@lorelle)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/)
 * I want to put a container with a list of links from within the post up INTO the
   Loop area, specifically the content area. Because the Loop template tag that 
   generates the content is `the_content()` I put the tag to generate the container
   with the list of links below it, but still in the parent container of the content
   tag.
 * Using CSS, I want to move the container UP so that when the page is generated,
   the container of links is floated to the right INTO the lower part of the content.
 * I’ve tried `position:absolute, position:relative, bottom:-200px, top:500px`, 
   and different variations. Oh, I can move the container around, but it doesn’t“
   float”. In other words, the content goes right over the top of it.
 * So how do I move a container up into the generated post content and make it float
   within the content?

Viewing 15 replies - 1 through 15 (of 20 total)

1 [2](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/page/2/?output_format=md)

 *  [Root](https://wordpress.org/support/users/root/)
 * (@root)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182011)
 * In the absence of a url here is a thought. When using position absolute the parent
   of the absolute container needs to be position relative. Just a thought. Otherwise
   put up the url and we can have a look 🙂
 *  Thread Starter [Lorelle](https://wordpress.org/support/users/lorelle/)
 * (@lorelle)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182015)
 * Didn’t work. The concept can be cured without a link, but if you [must have one](http://www.cameraontheroad.com/?p=481).
   The container in question features the story links.
 * The parent of the container is not absolute. I tried adding relative to the parent
   and it didn’t work. I do not want to change the parent container to absolute.
 *  [Joshua Sigar](https://wordpress.org/support/users/alphaoide/)
 * (@alphaoide)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182018)
 * Edit: Misread your post
 *  Thread Starter [Lorelle](https://wordpress.org/support/users/lorelle/)
 * (@lorelle)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182021)
 * Thanks for the try. – Oh, noticed you changed your answer. Darn. I thought we
   were on the right track. I can’t be the only one who wants to “shove” content
   up into the “content”. This is really frustrating.
 * .post {
    position: relative; }
 * .rustAutoLinkoffsPost {
    position: absolute; top: 250px; right: 0; }
 * Now try it and tell me it works. I might be crazy, but it isn’t working with 
   me.
 *  [Joshua Sigar](https://wordpress.org/support/users/alphaoide/)
 * (@alphaoide)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182025)
 * Yeah, your code just like mine works, meaning it will pull up that box to content
   but then I read that you want it to _“make it float within the content?”_
 * Right now you have short sentences at the end of post. If you have long ones,
   then they will be hidden underneath the .rust box, instead wrapping around the
   box.
 *  Thread Starter [Lorelle](https://wordpress.org/support/users/lorelle/)
 * (@lorelle)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182027)
 * Bingo. I know there’s a way to do this, but I can’t find my notes on it. I hope
   someone can help.
 *  [Root](https://wordpress.org/support/users/root/)
 * (@root)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182031)
 * Well a floated element needs to go first in the source order. And it must have
   its width defined.
 *  [stfox38](https://wordpress.org/support/users/stfox38/)
 * (@stfox38)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182089)
 * If you mean like [this](http://stephenfox.us/wp/index.php), it’s done by creating
   another sidebar in CSS and floating it right. Then, the content must be adjusted
   by padding. e.g.
 * .content {padding: 0 20% 0 20%; }
 * then the right sidebar can be width 20% and it works pretty well.
 * I hope this will help.
 *  [stfox38](https://wordpress.org/support/users/stfox38/)
 * (@stfox38)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182090)
 *  Thread Starter [Lorelle](https://wordpress.org/support/users/lorelle/)
 * (@lorelle)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182113)
 * stfox38,
    You’ve just created another column. I don’t want a column. What I need
   is just like a photo when the content wraps around it.
 * Root,
    So if the div is before `the_content()`, it could be “lowered” into the
   content itself with CSS and still float?
 *  Thread Starter [Lorelle](https://wordpress.org/support/users/lorelle/)
 * (@lorelle)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182817)
 * So anyone have an answer on how to move a float UP into the content when it is
   listed below `the_content()` tag?
 *  [davidchait](https://wordpress.org/support/users/davidchait/)
 * (@davidchait)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182819)
 * I don’t have my coding box up, so doing this blind.
 * I believe there’s a “get_the_content” tag, so you can do something like (this
   is all faked…):
    ` $thecontent = get_the_content(...); $mylinks = parse_my_links(
   $thecontent); echo '<div class="mylinks">'.$mylinks.'</div>'; echo $thecontent;
 * then
    ` .mylinks {float:right; }` as a start.
 * Again, this is off the top of my head.
    -d
 *  [davidchait](https://wordpress.org/support/users/davidchait/)
 * (@davidchait)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182820)
 * Just as another thought, this is also doable as a plugin that hooks the_content,
   parses the links, and builds the mylinks div and prepends it before returning
   the final content block up…
 * I also noticed that you have some links with very long text/titles, that are 
   going to really blow… they’ll make the box TOO big, so you’ll want to make sure
   you have a max width on the div.
 * Also, I have a bunch of stylistic/approach comments to your site. You’ve got 
   a lot of content, but the font choice/usage, IMHO, doesn’t make it very, ummm,‘
   reader friendly’. Of course, it’s always your choice at the end of the day, and
   I’ve just got minor quips. 😉 If you ever want to discuss further, drop me a 
   line directly at cgcode at chait dot net. Might be some of my plugins could be
   of help, but also something like the Headlines plugin (I’m also looking at the
   new image replacement methods myself) that might make for a cleaner look, less
   pixellated (give you are a photography site! 😉 ).
 * -d
 *  Thread Starter [Lorelle](https://wordpress.org/support/users/lorelle/)
 * (@lorelle)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182844)
 * Thanks for the look see, David. I want to “raise the box” with CSS, as I’m so
   plugin heavy I’m going bonkers as it is. I might blow this technique out as it
   really doesn’t do what I want at all.
 * The links that “show” are only the highlighted text and “about fred” isn’t much
   information to “link” to. What I REALLY want, if this was a perfect world, is
   to have the category’s posts show up in a box within the post or at the end of
   the post, at my choosing. But that isn’t going to happen very soon, either, so
   I live with my dreams.
 * Thanks for the evaluation of my site. I’ll look again at the font issue. I spent
   months researching (and continue to do so) to find the most common font, since
   I have a high overseas readership with folks still using Win95 and 98 with language-
   enabled yuk. Trying to serve the masses. I’m due for another review, so I’ll 
   check again.
 * The site is brand new version just up and I’m still tweaking. If you are emphatic
   about some of your critique comments, you can email me through my site. Thanks.
 *  [davidchait](https://wordpress.org/support/users/davidchait/)
 * (@davidchait)
 * [21 years, 1 month ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/#post-182851)
 * floating a div is the only way to get text wrapped around it — at least so far
   as I understand! 😉
 * And, if you reposition a floated div, it leave a ‘hole’ where the div was supposed
   to be, and doesn’t wrap anything where you move it to.
 * One technique I’ve seen, if you know the size of the block, is to ‘reserve’ space
   with a blank float (nbsp or something) ahead, then position the block when it
   is ready (and I think you somehow ‘hide’ the space for the div itself…). I recently
   saw a wacky technique for having images span the center of a two-column text 
   layout that did something like that. Can’t remember what other tricks they needed
   to do, but that’s the gist of it.
 * The two-column thing is screaming for ‘tricks’ — this isn’t. Has an easy solution,
   via a simple plugin. Let me know if you need help if you want to go that way.
 * The alternate approach is what I do for my articles, which is to have the left
   sidebar have ‘tabbed sections’ that look like they ‘fit’ with the article (look
   at one of my Reviews for a good example, with the multi-page table of contents
   and linked posts, etc.).
 * -d

Viewing 15 replies - 1 through 15 (of 20 total)

1 [2](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/page/2/?output_format=md)

The topic ‘CSS Float moved up inside loop’ is closed to new replies.

## Tags

 * [float](https://wordpress.org/support/topic-tag/float/)
 * [loop](https://wordpress.org/support/topic-tag/loop/)

 * 20 replies
 * 6 participants
 * Last reply from: [dolmarit](https://wordpress.org/support/users/dolmarit/)
 * Last activity: [21 years ago](https://wordpress.org/support/topic/css-float-moved-up-inside-loop/page/2/#post-183018)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
