thm
thm

Reputation: 23

How to clear floated img (sidebar is floated too)

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

Answers (1)

Alex Char
Alex Char

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;" />

fiddle

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;" />

fiddle

Also take a look in this article Clearing floats

Upvotes: 2

Related Questions