unable to isolate a div of images

[bkelly]

I found some code to display a set of images. The problem is that I cannot figure out how to make the images in a section by themselves and to force the next paragraph to be below the images. I have tried adding a

and a

around the group of images and around the following paragraph to no avail.

 

Here is the CSS code, currently in line rather than in a CSS file:

 

and here is the code for a single image, duplicated once for each image:

text below image.

 

On my desktop computer at home the images are aligned vertically one at a time.

On my laptop, with four images, they are aligned horizontally, take up about half the horizontal space, and the next paragraph fills in the blank space to the right of the four images.

 

How do I get the four images to fill all of the horizontal space and the next paragraph to be clear of and below the four images.

 

Thanks for your time.

[PicnicTutorials]

Hello, like this...

 

{ visibility: inherit; } Testing
<br /><!--<br />#images {<br />overflow:hidden;<br />}<br />#images img {<br />float:left;<br />margin:2px;<br />display:inline;<br />}<br />--><br />











I am content below...

 

Thats the simple way. If you want to get creative, then you can do it like this.

Edited May 3, 2009 by Eric

[jlhaslip]

Add a class to the "following" paragraph and clear the paragraph with this code:

p.following { clear:both; }

[bkelly]

Eric,

That worked out, some features are dropped but I will work to understand how those features worked. The creative version is cool. I saved it to my computer and it works. That will take a bit to understand.

 

jlhaslip,

As I understand your post, simply insert the line

p.following { clear:both; }

into the htm code of the following paragraph. I tried that and saw no difference. I probably did not understand something there.

 

Thanks to both for your suggestions.

[PicnicTutorials]

He meant like this...

 

.desc { clear:both; }

 

text below image.

 

Here is a little bit more of an explanation, and some more options (with the creative version).

[bkelly]

Hello Eric,

I am having trouble understanding this. Your CSS code contains:

 

I copied the code to my computer and added images such that they did not fill the horizontal space. When the section:

#images {
overflow:hidden;
}

 

Is present, the text, as in "I am content below..." is below the row of images. But when taken out, the text is to the right of the images. When I look up the overflow declaration,

here for example: http://www.quirksmode.org/css/overflow.html

The description does not seem to match the behavior.

 

There are two things I am not understanding about the overflow thing. First: why use the # images stuff rather than putting the overflow:hidden inside the "$images img" phrase , and second: what is "overflow" really doing.

 

Thank you.

[PicnicTutorials]

Yo!

 

The overflow is simply making the div contain its floats. Overflow would do no good if applied to the images. If the images are not streching the full width, then just increase the spacing between them.

 

Read/study this - may shed some light. http://www.visibilityinherit.com/code/contain-floats.php