The following HTML page has two DIV's; one containing a UL and the other containing an IMG. Since they are in separate DIV's, why is the IMG floating to the right of the UL? And, if you remove the margin-bottom from the 'li' then the IMG will position itself under the UL---which is where I wanted it in the first place. I don't understand why the UL/LI style is affecting the IMG, particularly since the IMG is in a different DIV. TIA <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> ul { list-style:none; display:inline; } li { float:left; position:relative; margin-top:0; margin-right:.7em; margin-bottom:.7em; margin-left:0; padding:0 .7em 0 0 } </style> </head> <body> <div > <ul> <li >Line 1</li> <li>Line 2</li> <li>Line 3</li> <li >Line 4</li> </ul> </div> <div > <img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google"></img> </div> </body> </html>
The margin extends "into" the second <div>, you can change this behaviour by adding the style, "clear: both;", to the second <div> Or you can use padding-bottom: .7em for the <ul> list instead of a margin
Thanks VERY much, Berserker.... I couldn't remember the "clear" attribute---and I'm not a good CSS'er anyway!