Reputation: 23
I need help with fiddle
I would like to clear nearest floated block, if it's possible.
It seems if there is some floating block on page and if I anywhere use clear, floated block will be cleared even it's placed in another div.
html
<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>
css
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;
}
Thank you and sorry for my English.
Upvotes: 2
Views: 42
Reputation: 33218
One solution is to remove clear:left
from this element:
div#content p#INeedThisUnderImg {
clear: left;/*Remove this*/
}
and add clear:left
in your html after this element #content
:
<br style="clear:left;" />
If you want exacly under image you can go this way:
div#content p#INeedThisUnderImg {
float: left;/*Add this*/
}
and add clear:left
in your html after last <p>
in #content
:
<br style="clear:left;" />
Also take a look in this article Clearing floats
Upvotes: 2