Working on my site, not going for anything super spectacular here, but I'm having a slight float problem.
Here is my site. As you can see, there's a div out of place there, floating outside the boundaries of the blue container. The stylesheet can be found at .com/style.css. Any help would be appeciated
The problem may appear to be associated with the float but it is actually caused by the image being wider than the div it is contained in. The image lines up to the left hand margin of the div and overflows to the right.
Whilst you could correct this by making the div wider there are more fundamental issues. In the CSS all the div widths are expressed as %, which is a problem when you have two fixed width elements(images) inside a fluid containers. What happens is the images break out of the containers rapidly as screen sizes reduce. In this case I would recommend using absolute units px for the div element to keep the page together in smaller screens.
i'm not sure what you have in mind for the finished look, but you have fixed width content (your images), inside a set of percentage width containers- so, every different sized viewport will alter where the content places itself in relationship to it's container (try resizing your browser window to see what i mean- click and drag has the images sliding all over the place, irrespective of any boundries).
i think for starters you might need a min-width, or perhaps even consider fixed width containers.
------ edit- apologies, axe_sosharp... i just noticed you must have replied a few moments before i did. i wasn't trying to undermine your comments :o)