I’ve got yet another new theme going. It’s been tweaked a bit for functionality, e.g. breadcrumbs, RSS links and so forth (different RSS links appear on different pages, depending on context)
There is one bug, as demonstrated here
(The problem is fixed, link removed)
I want img tags in posts to be floated, so the text wraps around them. No problem, but I want the next post to clear the img.
The trouble is that when I give the appropriate class for the start of the next post a ‘clear’ attribute, it clears the menu sidebars as well! I could cludge in a wide img that forces a new line, when it’s floated, but that has two problems as it will be ’squeezed down’ creating whitespace when the window is narrowed, and it won’t work if the window is widened. This’d mean the site would only look as expected in a narrow range of window widths.
Not good. It’s not critical, the next can be seen for the next post (it wraps too), but it isn’t what I want.
I suppose I could complicate the html for img tags to get around it, but that’s inelegant and inpractical (lots of back-editing).
There has to be an elegant fix, which doesn’t involve loads of edits, I’ve tried a <br clear="left" /> in the template, but that has the same problem. I don’t mind adding HTML to a template, just not to the post!
Any bright ideas out there? Help gratefully received. (If in the mood to fiddle directly, firefox has a web developer extension which allows you to affect the CSS of a site you’re viewing, on your browser, it doesn’t affect anyone else)
Future plans: I’ll keep changing themes until I have a nice selection that all work as expected, then put in a theme switcher to give user choice.
All Posts
3 Comments
Yep, that’s a problem. It happens because ‘clear’ applies to all previous floats, not just the ones you want– which can be very frustrating!
One strong possibility is to float your main column as well as the sidebars. Then the cleared posts should only pay attention to floats within the ancestor float (the content column) and ignore those outside it (like the sidebars). I honestly can’t think of too many other approaches that don’t involve upending the document source order and, in the end, floating the main column anyway.
A good place to ask CSS questions is the mailing list css-discuss (http://css-discuss.org/). It’s pretty high-volume, but there are a lot of very smart, experienced people there helping out others for free.
(Edit: Thanks, I’ll try the main column float, regards - Murk)
I tried a float: left and right on the main column (leaving in, then removing the margin-left:300px; as I did so) all that happened was that the main column got pushed below the sidebars.
Frustrating! I’ll look at that list, cheers for the pointer!
By jove, I think I’ve got it.
A position tag was also needed.
Thanks.