Sidebar using float conflicts with content using float+clear

bkpwns

New Member
I have a website that uses a sidebar on the right. That sidebar is using "float:right" as its CSS style.I like to add content to the main that has text floating around images, as explanations. For those images, I use "float:right" as well, and it works as expected.The challenge starts when I add several sections of text with images under each other, like this:\[code\]1st text +-----+text text | img | +-----+2nd text +-----+text text | img | +-----+\[/code\]By default, the 2nd paragraph would start right after the 1st one's end, like this:\[code\]1st text +-----+text text | img |2nd text +-----+text text +-----+ | img | +-----+\[/code\]I learned that I should use the style clear:right between the paragraphs to keep them separated, and that works as described.However, now the sidebar starts making trouble: If the sidebar is going down further than where the clear:right appears on the left side, then there will be a gap in the content, going as far as the sidebar goes. You can see the effect here: website example with sidebar influencing clear:rightAny suggestions how to deal with that, i.e. avoid that the clear:right doesn't get affected by the sidebar's height but only by the local text+image block?One suggestion I found so far would be to avoid using float for the sidebar, but use a table instead. But that leads to new complications (e.g. the sidebar would end up on the left unless I change the order of my html content, which would then probably lead to new issues with smaller screens and whatnot).
 
Back
Top