Forcing divs to a fixed left position 1

[ChrisRChamberlain]

Hi all

Have a test site with the main content of the page consisting of four divs.

Each div has a single thumbnail image and text description of the image.

The code for the div is :-

.maindiv {
[tab]position:relative;
[tab]top:-2;
[tab]left:-4;
}

All works as expected until the mouse is passed over the thumbnail. Courtesy of BillyRayPreachersSon, , the image becomes a larger animated .gif enabling a prospective customer to appraise a vehicle without leaving the main page.

Unfortunately, because the descriptive text is shorter than the height of the animated .gif, the next div appears below the text of the current div to the right of the animated .gif.

Is it possible to force the divs to follow under each other without showing themselves as described?

The site is at

http://www.motrac.co.uk/motorhouse/index.html

TIA

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk

 

[BillyRayPreachersSon]

If you add "clear:left" to your ".description" rule, all should work as expected.

P.S. The code you've got above needs unit specifiers (e.g. "-2px", not just "-2" to work properly across all browsers).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[ChrisRChamberlain]

Dan

Many thanks for reply, which was right on the money!

Thanks also for pointing out the poor coding practice.

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk