Solved

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

Posted on 2008-06-20
15
1,232 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
 
LVL 12

Accepted Solution

by:
nexusnation earned 500 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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
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 500 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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Help with HTML 7 39
Printing a Google Form 2 10
Having multiple API's on a site 10 16
CSS Font Arial Narrow 2 12
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

747 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now