CSS Positioning Help

Caged · 19 May 2006 at 15:35

I've been making good progress (I think) with my design for this page:

http://lsutv.net/newsite/show.htm

However, I have a problem trying to get the previous shows to display in a grid, rather than under each other. I cracked it with the float: attribute, but now the text following goes in between the gaps between the classes. Is the only way of stopping this to put the whole grid of images into a seperate div?

My CSS file is http://lsutv.net/newsite/style.css , and I hope it's not a horrible abortion. If someone can look over it and suggest changes that would be great.

Thanks

Caged · 20 May 2006 at 16:11

Bump for the afternoon crew, this is really confusing / annoying me.

Al Vallario · 20 May 2006 at 16:27

Code:

<p [b]style="clear: both;"[/b]>Totty TV is produced...

Give the paragraph an id and throw the style declaration in your CSS file if you want.

av.

Caged · 20 May 2006 at 16:41

Is that the only way to do it? I guess it will have to do unless I can hack something else together. Thanks a lot anyway

Al Vallario · 20 May 2006 at 17:36

Caged said:
Is that the only way to do it? I guess it will have to do unless I can hack something else together. Thanks a lot anyway

You say that as if it's a compromise? There's nothing wrong with that method whatsoever; it's semantically correct, works fine in all the modern browsers. The only alternative would be as you originally suggested; to put the images in a block-level div, thus forcing the text below. Personally I think that would be the best method - I don't see anything wrong with throwing another div in to contain a group of images - but you wanted an alternative? :confused:

av.

Caged · 20 May 2006 at 17:48

Al Vallario said:
You say that as if it's a compromise? There's nothing wrong with that method whatsoever; it's semantically correct, works fine in all the modern browsers. The only alternative would be as you originally suggested; to put the images in a block-level div, thus forcing the text below. Personally I think that would be the best method - I don't see anything wrong with throwing another div in to contain a group of images - but you wanted an alternative?

av.

I was just seeing if it could be done by applying the formatting to the block of images rather than something outside, but you're right, it doesn't matter as long as it's not a dirty hack. Chucking it in a div doesn't stop the text flowing into it anyway. If I can chuck a div around them and somehow stop the text still flowing into it then that would be the preferred method. I'll have a look at my code, I've probably forgotten to close it or something retarded like that.

Cheers

Beansprout · 20 May 2006 at 17:50

You have to use clear after floats because floats do just that, float, and the clear tells the browser "oi, don't put anything underneath them"

Edit: clear:both, that is

Caged · 20 May 2006 at 19:48

Fixed it by having every grid item as an episodeprevious class with a fixed pixel width, all float: left. They hit the maximum width and have to wrap underneath. The width takes up all the available space so the text below doesn't have a chance to float into the gaps.