Height: 100% is misleading. It does not do anything.
See this link for details on how to float images.
If you place your own images of any size in the code from my question, in DW the image without the float will fit in the div tag.
If you open it in a browser it will display correctly
I just found out if the same page is displayed in DW Live View the page will display correctly. However when you return to normal view in DW the image returns to overflow the div with the original size of the image.
There are no browser compatibility or validation errors that appear.
Thus it is impossible to design a webpage in DW with code that works in at least Safari Firefox and IE8 that I tested it in.
To work consistently across all browsers, a floated container must have width but not necessarily height.
In fact, height is a restriction in all browsers except IE. So if height is needed to reveal a background image, you should use min-height with a value in pixels or ems; not %.
Hope that helps.
This rule is designed primarily for an elastic layout. If an image is placed inside of a div with a width and height, it allows the image to expand and contract along with the div without affecting its aspect ratio. Helps eliminate pixilation.
If an image is set with ems and you change the div height the image will not fill the div, it will be limited to the ems you set. One more thing you have to go back and change in the site without any need to.
Using a background in an elastic layout will not always cover when expanded using Ctrl+. In addition backgrounds cover in fixed layouts but not elastic.
The problem that I am having is that this style rule when displayed in DW Live View and Browsers that I have tested display the layout correctly.
Returning to normal DW view from Live View causes the image to display at the original dimension and fill up the workspace. Thus I can´t work on the page.
It appears that the problem is with DW because it works ok in Live View. That is my dilemma.