I was wondering if anyone could shed some light on a problem I am having with horizontally aligned images in a two column floated layout.
I can understand the reason that the problem occurs, unfortunately the solution evades me .
I have checked the how-to forums, and have googled and have yet to find a suitable method to fix this error without moving away from a two column floated layout.
Unfortunately as it is a work related website I cannot release the entire source or show pictures, however I have created a detailed diagram which I believe might help convey the problem.
The diagram is here :
The goal is to have a two column floated layout, with support for horizantally aligned images within content elements. However, when floating images within the main content area, they overlap the underlying content elements, this I understand is CSS logic. However, the known solution of adding a 'clear:both;' element to the bottom of each content element creates a new problem. Since the sidebar is a floated element, the clear:both causes content to shift downwards under the sidebar.
I have attempted to find a method of clearing simply within the content div, however there does not appear to be one.
I have experienced this problem several times before with this style of layout, and would be delighted if someone was able to provide some insight into solving the issue.
The problem lies in trying to
The problem lies in trying to clear the float elements instead of enclosing them. See enclosing float elements.
Thank you Gary, let it be
Thank you Gary, let it be known you are an absolute legend!
I was expecting that the overflow:hidden would simply cut off the larger images. However it did exactly what I was looking for!