CSS 0. bbum 1. (sanity suffers)
CSS boogeyman defeated. Sane whitespace restored. Posted in / comments pushed to the bottom of the post.
Janis Joplin — our dog pictured at the left — offered a nice vertical photo to test the solution. Click through for the gnarly details.
CSS still sucks, but at least it is doing what I want.
Stuart and Stefan identified the problem. Guido (no link) offered a solution, only part of which appeared to be necessary. Simply surrounding the div/post block with a div with ‘style=”float:left;”‘ was enough to fix the problem. I stuck a ‘br style=”clear: both;”‘ tag in between the end of the post and the ‘posted in / comments’ content to ensure that falls at the bottom of the post on its own line. Guido suggested this would be required, but it wasn’t. Without it, the posts are correctly divided, regardless of the presence of an image.
Thanks for all the clues, hints and solutions. Stefan also suggests reading this article about CSS layout. Looks very interesting.
The wordpress template used by this site is available in this subversion repository.
July 27th, 2005 at 11:42 pm
in your img tag, you can do border=”0″ to keep the blue border from coming up in firefox. I’m not sure about your other problems however.
July 28th, 2005 at 1:54 am
Well, the whitespace is there because the sidebar is a float:left div, so the clear will clear the bottom of the sidebar. You could put your pictures on the right, then clear:right, which won’t interact with the sidebar at all.
July 28th, 2005 at 6:04 am
Concerning the image, you have border: none; in your CSS. Give border: 0; a try.
July 29th, 2005 at 4:39 am
It’s a float/clear problem. Just surround your blog entry with an additional left floating div and the clear will not clear the float: left of the bar at the left side.
Just tryed it and it simply works …just put a div with float left before the class=”post” div.
July 29th, 2005 at 5:32 am
Ah, forgot: Close the div AFTER the complete blog entry. Not the whole opening and closing before the post-div