Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2008-06-20
15
Medium Priority
?
1,275 Views
Last Modified: 2011-04-14
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
Comment
Question by:rhandalthor
  • 6
  • 5
  • 3
  • +1
15 Comments
 
LVL 17

Expert Comment

by:nanharbison
ID: 21829667
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
 
LVL 12

Expert Comment

by:nexusnation
ID: 21829703
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
 
LVL 15

Expert Comment

by:dosth
ID: 21829708
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Accepted Solution

by:
nexusnation earned 2000 total points
ID: 21829716
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
 

Author Comment

by:rhandalthor
ID: 21829781
@ 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
 
LVL 12

Expert Comment

by:nexusnation
ID: 21829794
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
 

Author Comment

by:rhandalthor
ID: 21829890
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
 
LVL 15

Expert Comment

by:dosth
ID: 21829921
sounds good, post what you did finally so it will be helpful for others.
0
 
LVL 12

Expert Comment

by:nexusnation
ID: 21830065
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
 

Author Comment

by:rhandalthor
ID: 21830554
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
 
LVL 15

Expert Comment

by:dosth
ID: 21830699
div.entry div { clear: both }

cant we do this and fix gallery some way?

give me the gallery url
0
 
LVL 12

Assisted Solution

by:nexusnation
nexusnation earned 2000 total points
ID: 21830708
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
 

Author Comment

by:rhandalthor
ID: 21830845
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
 

Author Comment

by:rhandalthor
ID: 21836309
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
 
LVL 12

Expert Comment

by:nexusnation
ID: 21836444
Not a problem.  Continue to ask related questions, that way I can follow along with your progress. :)

nex
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question