Warning: This post may not be comprehendable by people who don’t do CSS/HTML.

The site I’ve created for my psych lab presented a frustrating float problem: I needed to have a title icon relatively positioned so that it overlapped the border of the content <div>, but I also needed all images, which are floated, to fit completely within the content <div> as well. Usually, to force floated images to stay within a <div>, you can put { overflow: hidden } for the <div>, but if I did this here, it would cut off my title icon. And that was just plain ugly.

Hence my journey into messy absolute positioning of the title icon, inserting ten thousand <p>&nbsp;</p> to fill up the extra space beside the abnormally large map to our lab, and self-questioning of whether that title icon was really necessary. That is when Google gave me an ingeniously simple solution I should’ve thought of when the problem first cropped up: Dump a single <p>&nbsp;</p> that is set to { clear: both }.

No, it’s not the prettiest solution — it’s best if everything can be controlled by CSS, or something outside of the HTML file — but I will have to live with it for now. Besides, it’s better than seeing this in the page source:

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<!— plzdontlookatmycode —>