• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1300
  • Last Modified:

Wordpress theme:Images don't align properly in post: clear:both caused the galleries to collapse...

I am developing a Wordpress theme (Wordpress 2.5.1). I am adding the content from the former website at the moment. When I add an image to a post the image continues into the next post which makes things confusing and ugly. When you look at the news sections on the index you will understand what I mean. Images need to be aligned or float right but stay next to their post. They should not continue into the next post. How do I make that happen. When I align or float the image right it just ends in the next post. Just adding more text to make the post longer is not an option as you can understand.
I did add div.entry div { clear: both }, (advice from NexusNation) but then the entire entry doesn't float anymore, including NextGen galleries that I have added here and there.  I need to clear my float, before the end of the div that contains the whole post. Any idea how I can do that? Maybe add another divider + the css Nexus gave me?


What you need to do is clear your float, before the end of the div that contains the whole post.

This should do the trick:

div.entry div { clear: both }
0
rhandalthor
Asked:
rhandalthor
  • 6
  • 5
  • 3
  • +1
2 Solutions
 
nanharbisonCommented:
Did you try:
overflow:hidden; in the div?

div.entry div {
   clear: both;
  overflow:hidden;
 }

also,  I find the page doesn't recognize a CSS element if I forget the semi-colon after it, but I think if the element is the last element inside the closing bracket, you don't need it. But you might try adding the semicolon first.
0
 
nexusnationCommented:
Hi again,

I'm confused how
div.entry div { clear:both }
doesn't work in some cases.  Could you point to a gallery for me?  I just applied that CSS style and it all looked fine to me.

nex
0
 
dosthCommented:
i see you have this commented in css, why?

/*added to make sure the images don't enter the next post*/
/*div.entry div { clear: both }*/
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
nexusnationCommented:
Okay, I see a solution, I think.

In your code (on both single.php and other pages), you probably have this:

<div id="post<?php the_ID(); ?>">

Change that to:

<div class="post" id="post<?php the_ID(); ?>">

And then use this CSS:

div.post { clear:both }

The reason why I used "div.entry div" was because that second div referred to the div that holds the post.  But you have multiple divs inside the div.entry, so doing this would work. (You could do div.entry+div, but that won't work in IE.)
0
 
rhandalthorAuthor Commented:
@ Nexus Nation: I am going to give it a shot right now. I will let you know asap .
@dosth: I commented it out cause it ruined my galleries...
@ nanharbison: If Nexus's second option does not do the trick I'll try yours.
0
 
nexusnationCommented:
The big issue here is that we need a link to your galleries... otherwise we don't know how this CSS will be applied to your galleries.  My quick browse through didn't find anything (kinda scared by the revolving background) -- so if you could post a gallery there, that'd help..

However, assuming that your Wordpress theme isn't too non-standard, my trick should get it back into line.

nex
0
 
rhandalthorAuthor Commented:
Well this works. :-)  Images don't cross over to the next post and the galleries are still displayed well. Only one thing. I would like div.end to be underneath the images as well. I will try to add clear:both here and see if that works too...
0
 
dosthCommented:
sounds good, post what you did finally so it will be helpful for others.
0
 
nexusnationCommented:
In that case, instead of adding clear:both to div.post, add clear:both to div.end.  OR, include div.end within div.post.

Again, not knowing how your galleries are coded, I'm just shooting in the dark. :)
0
 
rhandalthorAuthor Commented:
Well, clear:both on .end doesn't do the trick. I tried to move the divider outside the post to see if it would stay underneath it and the image, but nothing changed. Any idea for this to make the post display perfect?
0
 
dosthCommented:
div.entry div { clear: both }

cant we do this and fix gallery some way?

give me the gallery url
0
 
nexusnationCommented:
The problem is in your overall HTML structure.  You have div.end to wrap both the post metadata as well as the post's content itself. Here's how I would format it:

<div id="post<?php the_ID(); ?>" class="post">
  <!-- header, date etc all goes here -->
  <div class="content">
      <!-- content, image, etc. all goes here -->
  </div>
  <div class="end">
     <!-- post metadata goes here -->
  </div>
</div>

Then, the clear:both should be for div.end only.
0
 
rhandalthorAuthor Commented:
I will try this in the morning. Too late for me know (20:13 BKK). Didn't get much sleep last night. I think you are right Nexus. When I tried to manipulate the html the metadata was somehow still connected to the content. I am sure when I am more awake tomorrow I will be able to solve it thanks to your help. I will let you know as soon as I have some more intel.
0
 
rhandalthorAuthor Commented:
I works Nexus. I forgot to rename the content divider. Did as you told me and ......voila! Thanks a lot. Now I can continue making quite a few final adjustments.
0
 
nexusnationCommented:
Not a problem.  Continue to ask related questions, that way I can follow along with your progress. :)

nex
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now