Can someone help me to better understand how (and where/when) to use "clear"? I'm reworking my message board code (again - to eliminate the table wrapper) and I know I'm going to need to use "clear". I could probably get it working via trial and error, but that would just be luck and perseverance - I'd rather own the knowledge.
Here's a mockup of what I'm doing, but if it's not clear, please refer to the attached screenshot.
- Code: Select all
1-----------------------------------------------+
| top frame (image) |
+-----------------------------------------------+
2-+ 3--------------+ 4----------------------+ 5-+
| | | [posted by] | | [said-to] | | |
|s| | +----------+ | | +------------------+ | |s|
|i| | | | | | | | | |i|
|d| | | | | | | | | |d|
|e| | | | | | | message text | | |e|
| | | | photo of | | | | and/or | | | |
|f| | | poster | | | | attached | | |f|
|r| | | | | | | photo | | |r|
|a| | | | | | | thumbnail | | |a|
|m| | | | | | | | | |m|
|e| | +----------+ | | +------------------+ | |e|
| | | [replybtn] | | [message controls] | | |
+-+ +--------------+ +----------------------+ +-+
6-----------------------------------------------+
| bottom frame (image) |
+-----------------------------------------------+
I've numbered each div in its uppper left corner. All divs are floated left.
The wrapper div for all of this is positioned relative.
Divs 1 and 6 are exactly 472px wide, and divs 2-5 have their widths set so that they add up to 472px.
Divs 2 and 4 use a background image (repeat-y) to create the sides of the neon frame.
I'm guessing I'll need to use clear(:left?) on div 2, and clear(:right?) on div 5 and maybe even clear:both on div 1 and/or 6. But I'm not sure about any of that - and I certainly don't have a good understanding of how and why this works.