A smarter way of doing this?

[daddyalfie]

On THIS web-page I floated-left the thumbnail links at the top in a <ul> so as to display them in line. But then the "I" in the first paragraph below (I remember...) floated right up with the thumbnails! I solved it by adding margin-right to the <li> until it was pushed down to where it belongs.

 

I first tried to add clear: left; to the paragraph CSS, but that screwed everything up beyond recognition!

 

I know there must be a smarter way to fix this!

 

As always - thanks! Alfie

[akurtula]

I think you can use clear:both; for the paragraph. Or add ul#gallery{overflow:auto;)

 

If I am right and the overflow:auto works then I would use that

[Andrea]

Did you try 'clear: both'? (or is it 'clear: all'? --- I never remember that and don't have time to look)

[daddyalfie]

@ Andrea: I never thought I would have to correct YOU!! It is clear: both; and it did not work either anyway.

 

@ akurtula: Thanks and I shall investigate the "overflow" property. That sounds interesting!

 

What I do not understand properly is the "display: inline;" CSS property. Would that put the thumbnails "All-In-A-Row"? (or is that in-line ?)

 

Thanks for looking!

 

Alfie

Edited October 3, 2011 by daddyalfie

[akurtula]

the inline does the same thing you did with the thumbnails - it will display them horizontally. So saying

ul li{float:left;}

is the same as

ul li{display:inline;}

 

But I never used the inline (I am used to the floating way) so I am not 100% sure whether it's a good idea or not

 

use this to quickly test any css you are not sure off http://www.w3schools.com/cssref/tryit.asp?filename=trycss_display_inline

Edited October 4, 2011 by akurtula

[Andrea]

@ Andrea: I never thought I would have to correct YOU!! It is clear: both; and it did not work either anyway.

I don't think that falls under the definition of correction

 

The reason things fell apart on you with the clear; both is that the div the text is in is as wide as your wrapper and clearing the p throws it under your floated nav division. I don't think your layout is wrong - it works, but I'd have added the background images to a wrapper/header/footer and would have my content div separate next to the nav.

 

You're still mixing lower and upper case - next time something isn't working, see if that's not the problem

[daddyalfie]

I don't think that falls under the definition of correction

 

Your answer is brilliant and I shall work that angle. Thank you!

 

I shall also check out the inline solution, so thanks for that as well!

 

Alfie