If you look here on http://www.monetizemyweb.com/wordpress some of the H2 tags after images go into the content from the last post. What's the best way of fixing this? A <br clear="all" /> works but I am looking for a CSS solution.
I'm not sure how much you know about CSS, so bear with me: The problem, (I guess you can call it that), is in your layout.css. The issue is that the .alignleft and .alignright classes float your image left or right, respectively. However, the containing elements of floated items usually won't grow with the contents. (Floating takes an element out of the normal flow of the document.) Thus, you often have to float the containing element also. In this case, that would be the ".post" class. So, you could add: "float:left;" to ".post". This will take care of the image issue. However, now its parent element(s) should also be floated. (Yeah, more floating! : ) So, you need to add "float:left;" to #container, #leftcontent, and #content. (I know that may sound weird, but that's the best way I know how to do it.) The final issue is the ul at the end of the page that contains the "older entries" link. This will need to either be cleared or set to "float:left;width:100%;". I'd opt for the second one since your footer is already clearing the floats. NOTE: The float declaration above for the #container element will override the auto margin you have set. You may just want to replace it with a set margin. If you're scared this is just opening up a can of worms, that's up to you. It's a bit tricky when you mix floated elements with non-floated elements, especially if it's done after the original layout's complete. But, with a little tweaking I think it should work just fine. Let me know if you have any questions, or if it doesn't seem to work. But, I hope it helps! : ) (I only tested this in FF3. If you have any issues with other browsers, let me know.)
Thanks bud, just one issue. If you notice, the 'Older Entries' link is appearing at the top instead of the bottom - only in FF3. Thanks
Yeah, that's the ul at the bottom of the page I was talking about. Did you try adding "float:left;width:100%"? You could assign an id or a class to it and then style that in the CSS, as you probably wouldn't want that same style for all of the uls. Let me know if it works, or if I didn't explain it enough. : )
I did that, but if you look, the very top post is having issues with the right part extending all the way.
No problem. Glad it's working for you. (By the way, I'll be checking back on your site. Didn't get the chance to really read it, but it looks like you've got some good info there. : ) Have a good night.