Float images

[laurie_m]

Hi. New here.I'm in the process of changing my site from html to xhtml with a remote CSS.Page displays fine in IE but not in FF.In FF I must put the content section in a table, otherwise the images all move down to the bottom of sidebar a or the bottom of sidebar b if I have three sidebars on the page.This doesn't seem correct. Should I be using some other tag or is there a problem in my CSS?My homepage is one such page:Wilderness Landscape Photography

long_code_here = ';<style type="text/css">body{background-color : white;}h1{font-family: comic sans ms, sans-serif; font-size:20pt; margin-bottom:0px;}h2{font-family: verdana, sans-serif; font-size:12pt; margin-bottom:0px;}h3{font-family: verdana, sans-serif; font-size:9pt; margin-bottom:0px;}h4{font-family: verdana, sans-serif; font-size:9pt; color: #006600; margin-bottom:0px;}h5{font-family:comic sans ms, sans-serif; font-size:14pt; margin-bottom:0px; color: orange; text-align: center;background-color: rgb(255, 226, 178); border: 1px solid orange; width: 40%;}#navlist ul{margin-left: 0;padding-left: 0;white-space: nowrap;}#navlist li{display: inline;list-style-type: none; font-family: verdana, sans-serif; font-size:9pt;}#navlist a { padding: 3px 15px; }#navlist a:link, #navlist a:visited{color: #000000;background-color: #ffffff;text-decoration: none;border: 1px solid orange;}#navlist a:hover{color: #000000;background-color: rgb(255, 226, 178);text-decoration: none;}#container {width: 948px;\width: 948px;w\idth: 948px;border: 2px solid orange;margin-top: 8;margin-left: 8px;margin-right: 8;margin-bottom: 0px;padding: 8px;}#banner {padding: 3px;margin-bottom: 0px;background-color: white;}#banner img {margin-right: 16px;}#content {padding: 3px;margin-left: 0px;margin-right: 200px;background-color: white;font-family: verdana, sans-serif;font-size: 9pt;}#sidebar-a {float: right;width: 186px;\width: 186px;w\idth: 186px;border: 1px solid orange;margin: 0;margin-left: 0px;padding: 6px;background-color: rgb(255, 226, 178);font-family: verdana, sans-serif;font-size:9pt;}#sidebar-b {clear: right;float: right;width: 186px;\width: 186px;w\idth: 186px;border: 1px solid orange;margin: 0px;margin-top:0px;margin-left: 0px;padding: 6px;background-color: rgb(255, 226, 178);font-family: verdana, sans-serif;font-size:9pt;}#sidebar-c {clear: right;float: right;width: 186px;\width: 186px;w\idth: 186px;border: 1px solid orange;margin: 0px;margin-top:0px;margin-left: 0px;padding: 6px;background-color: rgb(255, 226, 178);font-family: verdana, sans-serif;font-size:9pt;}#footer {clear: both;padding: 8px;margin-top: 8px;background-color: rgb(255, 226, 178);font-size:7pt;font-family: verdana, sans-serif;border: 1px solid orange;}div.c1 {text-align: center;}span.c4 {color: #808080; text-decoration: underline; font-weight: bold;}li.c1 {list-style: none;}img.right {float:right; border:1px solid black; margin:6px 0px 6px 6px; }img.left {float:left;  border:1px solid black; margin:6px 6px 6px 0px;}</style>

Code Author: I put the above code together with reference to W3C schools and other sources.With thanks,Laurie.

[Brendon Branigin]

displays fine for me in ff nice job

[laurie_m]

Thanks for the encouraging words Brendon. It displays fine in FF because I've got the content section surrounded by a table. I think that there must be a better/propper way.I went to CSS to cut down on the amount of code on the page, especially table code, but am dissapointed that I've been forced back to the old way in this case.Regards,Laurie.