Align Along a Line
Here is the page as I indended it to be viewed. Notice the uniform space between the bottom of one screenshot and the top of the next.
Here is the same page in Safari 1.2. It's almost identical, but the
style="clear: both;"> has pushed the second image and paragraph below
the sidebar. I assume this is because the sidebar is set to float to the
left, and the
clear is clearing everything, not just what is inside
the current div.
I've mangled the screenshot a little to show the sidebar (red), the main content area (green), and the line that the second screenshot has been pushed below (blue).
- The generated box is moved below all floating boxes of earlier elements in the source document.
So, Safari seems to follow it to the letter, but the end result is a little strange. Guess I'll try to come up with another way that satisfies both browsers. Or maybe the floating sidebar is the part that should be changed. I hear it isn't the most compatible design method.