Highlighted

Photo Gallery Misbehaving

Explorer ,
Feb 15, 2020

Copy link to clipboard

Copied

Hello
I needed a photo gallery on my web page to promote content of bookstores past.
I used this gallery from https://www.w3schools.com/css/css_image_gallery.asp.


Here is the link to the web page that I am having difficult creating a verticle alingment.
http://meherbabalibrary.org/babalist/list_l/list_l_life-circular-30.html
Where the photos end (after the photo gallery) the text and links should drop down. I attach a web page showing how material is arranged from top to bottom.

 

This page with the image gallery the content rearranges to the right side of the photo gallery.

 

I fiddled with creating divs, (below the photo gallery) with paragraphs, with Main and Section. That fiddling did not help to prevent the shuffle of material from below the photo gallery from adjusting to the right of the gallery.

 

How do I keep the photo gallery stationed in its div area (as the photo gallery) and text and link content in its own space below?
Let me know what to do.
I am Stuck.
Thanks!!webpage-drops down as expected.jpg

Topics

Code

Views

217

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Photo Gallery Misbehaving

Explorer ,
Feb 15, 2020

Copy link to clipboard

Copied

Hello
I needed a photo gallery on my web page to promote content of bookstores past.
I used this gallery from https://www.w3schools.com/css/css_image_gallery.asp.


Here is the link to the web page that I am having difficult creating a verticle alingment.
http://meherbabalibrary.org/babalist/list_l/list_l_life-circular-30.html
Where the photos end (after the photo gallery) the text and links should drop down. I attach a web page showing how material is arranged from top to bottom.

 

This page with the image gallery the content rearranges to the right side of the photo gallery.

 

I fiddled with creating divs, (below the photo gallery) with paragraphs, with Main and Section. That fiddling did not help to prevent the shuffle of material from below the photo gallery from adjusting to the right of the gallery.

 

How do I keep the photo gallery stationed in its div area (as the photo gallery) and text and link content in its own space below?
Let me know what to do.
I am Stuck.
Thanks!!webpage-drops down as expected.jpg

Topics

Code

Views

218

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Feb 15, 2020

Copy link to clipboard

Copied

It's a basic but not terrific gallery built with floats.  And floats must be cleared.  Did you add the "clearfix" div to your page?  See below.

https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Feb 15, 2020

Copy link to clipboard

Copied

You also have an astounding number of code errors that need attention. 

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmeherbabalibrary.org%2Fbabalist%2Flist_l%2F...

 

You should not combine HTML5 with much older XHTML 1 code.  Use all HTML5 as that's the current web standard. 

 

Maintain <tag> pairs throughout the document.  Orphaned tags cause misalignments.

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group