Simple CSS Image Gallery Problem

[corywoolf]

Hello,

I am putting some finishing touches on a website I built with RapidWeaver and was wondering how to modify the CSS to make 2 rows of 5 images in the photo gallery instead of the current rows of 3 images. I tinkered with the CSS for about an hour tonight and kept getting strange results. I know it has to do with "Float" and "Clear", but I am having trouble figuring out how to do something that should be a simple fix. I have taken some basic XHTML and CSS coding courses, but that was 4 years ago...

Anyone with some web development experience, could you please take a look and give some hints/tips on how to achieve this?

https://allstatemichiganquote.com/page10/page10.html

Thanks in advance,

- Cory

Attached is the style sheet and html pages.

 

[nuxx]

Well, you've got a lot of CSS there but at a cursory glance I would suggest taking a look at the file 800.css where the declaration;

#content { width: 550px; }

is limiting the content area to a width of 550px.

Try changing it to

#content { width: 100%; }

so it expands to fit the width of the parent element and allows 2 rows of 5 images.

 

[corywoolf]

Well, you've got a lot of CSS there but at a cursory glance I would suggest taking a look at the file 800.css where the declaration;

#content { width: 550px; }

is limiting the content area to a width of 550px.

Try changing it to

#content { width: 100%; }

so it expands to fit the width of the parent element and allows 2 rows of 5 images.

Thanks a ton!