div – float – clear conundrum

[tracybags]

Hi Guys,
I have a problem with my floats which are not behaving as I want them to and have tried all the tricks I know. There is a #singlecol which has 100% width with image and text. After this is a #LeftCol and a #RightCol. All was workign perfectly until I added an image to the #singlecol with a .artwork class. Now, the #LeftCol will NOT sit to the left, it is now sitting to the right of the image. If I add spaces into the text to lengthen the div it goes where it should, or if I make the image smaller it goes where it should. I thought putting a clear: right or clear:both on the #singlecol div would solve it but it won’t. I’m obviously not trying the right thing but feel like I’ve exhausted my attempts. Can anyone shed light on why this won’t align as it should? Thank you very much. http://flippineck.org.uk/Musicals/clicketyclack.html

[timbarden]

Adding a clear: left; on to the #LeftCol will fix it, as it will clear the floated image in #singlecol. The clear needs to come after the element you’re trying to clear, not on it.

[tracybags]

Timbarden I thank you so much!!! I had just about ‘clear’ ‘float’ ‘right’ left’ ‘none’ on and on and on – but OBVIOUSLY not this one!! Worked a treat thank you so much – I’ve been static since posting as I need to create a whole pile of pages based on this one so had to get this one right first!
thank you so much – this site has saved my life many times!! :)

[Author]

Posts