On my site http://www.jamescarnley.com I have a news area where I am going to be posting lots of different things with varying amount of text and images. I designed my site entirely with CSS with no tables at all. If you look down towards the middle you can see where the image extends out of the news box it is in and interferes with the other boxes. It is like the boundaries of the CSS box do not apply to the image at all.
This happens when I use float: left on the image to make the text wrap around it. I used clear: left on the top of each news box to at least make the image not overlap several boxes but the problem of the image not being in the colored box is still there.
Anyone know why the box does not contain the image also? Or can anyone see that I overlooked something simple?
It caused a slight problem in IE though (as always =P) where if an image is float: right then the paragraph extends all the way to the far left border of the browser. The picture of Lord of the Flies on my page is an example and im not sure why it does this.
Any help will be appreciated.
I have my content on my news page wrapped in a div called "news" and that is what is stretching to the left edge of the browser. I made the background red to test it and it only stretches on Internet Explorer.
What's even wierder is that if you make the window smaller to a certain point the news div re-sizes to the right size (same as mozilla).