Can someone assist me with this code snippet?
I am trying to figure out a way to clear the nearest floated block.
It seems that whenever I use the clear property, it clears any floated blocks on the page, even if they are in a different div.
Here is the HTML code:
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</nav>
<div id="content">
<img src="http://www.lazne-belohrad.cz/soubory/tinymce/!titulni_obrazky/knihy.png">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sapien. In rutrum. Integer in sapien. Nam quis nulla. Aliquam ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
<p id="INeedThisUnderImg">This "cleared:left" paragraph clears "nav floated left". Is any way to clear only floated img? I would like this paragraph under img. I could user position absolute for nav, but if content is only few words, nav overflows footer :(</p>
</div>
<footer>
<p>Footer</p>
</footer>
And here is the CSS code:
nav {
float:left;
border: 1px solid black;
width: 100px;
}
div#content {
border: 1px solid black;
margin-left: 110px;
}
div#content img {
float: left;
}
div#content p#INeedThisUnderImg{
clear: left;
}
footer{
border: 1px solid black;
margin-top: 10px;
}
Any help or suggestions would be greatly appreciated. Thank you!