0

I have uploaded the following page to make easier for you to help me: http://www.rebuslondon.com/GEBROCHUREcopy.html Do not use Internet Explorer as I have not optimised the page for that.

As you can see, there are 4 images, being three orange and one yellow. While the orange ones are simply embedded into the parent element, the yellow one is floated so that it will stick to the parent's right edge when the browser window is enlarged. This works all right but when the window is narrowed (for example 1024*768), this creates a gap below the floated image.

Is there a way to make that gap disappear? I guess the best way for you to understand what the issue is is trying resizing the browser window. You'll notice that the narrower the window the bigger the gap will become.

Thanks much!

user1769038
  • 33
  • 1
  • 6

2 Answers2

0

The problem is the fact that you have added clear:both to the li immediately following li.right. If you remove this rule, it displays fine.

#portfolio #container > ul.projFlow li.floated + li {
    clear: both;
}

Asad Saeeduddin
  • 46,193
  • 6
  • 90
  • 139
0

Simply remove clear both from your contents.css line 90

#portfolio #container > ul.projFlow li.floated + li {
clear: both;
}

Just remove that completely and it will be fine.

matt
  • 1,015
  • 4
  • 14
  • 28