2 replies [Last post]
xaeon
xaeon's picture
Offline
newbie
Last seen: 12 years 23 weeks ago
Joined: 2009-12-11
Posts: 3
Points: 4

Hi guys,

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 Tongue.

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 :

http://img301.imageshack.us/img301/305/theproblem.jpg

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.

Many Thanks!
Xaeon.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 11 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The problem lies in trying to

The problem lies in trying to clear the float elements instead of enclosing them. See enclosing float elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

xaeon
xaeon's picture
Offline
newbie
Last seen: 12 years 23 weeks ago
Joined: 2009-12-11
Posts: 3
Points: 4

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!

Thanks again!