Support » Themes and Templates » 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)
  • 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 🙂

    Didn’t work. The concept can be cured without a link, but if you must have one. 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.

    Edit: Misread your post

    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.

    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.

    Bingo. I know there’s a way to do this, but I can’t find my notes on it. I hope someone can help.

    Well a floated element needs to go first in the source order. And it must have its width defined.

    If you mean like this, 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.

    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.

    So if the div is before the_content(), it could be “lowered” into the content itself with CSS and still float?

    So anyone have an answer on how to move a float UP into the content when it is listed below the_content() tag?

    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;

    .mylinks {float:right; }
    as a start.

    Again, this is off the top of my head.

    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! 😉 ).


    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.

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


Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘CSS Float moved up inside loop’ is closed to new replies.