CODEWITHSUNDEEP
css
imrolling
imrolling

Reputation: 9

how to clear float in this kind of situation (without adding any code to HTML)

Hello I am trying it hard to figure it out how to clear float in this kind of situation ... 

<div id="content">
    <img src="" width="500" height="688" alt="" />

    <blockquote></blockquote>

    <blockquote></blockquote>


    <cite></cite>


    <h2></h2>

    <p></p>

    <ol>
        <li>
        <img src="" width="460" height="194" alt="" />
        </li>   

        <li>
        <img src="" width="460" height="194" alt="" />
        </li>   

        <li>
        <img src="" width="460" height="194" alt="" />
        </li>   

        <li>
         <img src="" width="460" height="194" alt="" />
        </li>       

        <li>
        <img src="" width="460" height="194" alt="" />
        </li>       

    </ol>       

</div>

1- ) I want to float only FIRST image in #content to right but when I apply #content img{float:right;} , it float all the images even the ones which are in < li > Tag. How can I float only first image in div and save the rest from floating ?

2 -) I want to position that < Cite > beneath the first float image, how can I clear floats before ?

PS I don't want to add or change any code in html ,, is it possible to do it from css only ?

Thanks

Upvotes: 1

Views: 51

Answers (2)

doABarrelRoll721
doABarrelRoll721

Reputation: 378

You really really should explain why you don't to change the HTML (no access? who wrote the HTML?)

  • Like @joffyb said, #content img selected all images underneath #content. Since the other images are also under #content, they get selected, too. Use the immediate-child-selector instead #content > imh.

  • As for the second point: You clear floats with clear:both; (duh!). In your case clear:right; would be sufficient.

I'm not entirely sure what you're trying to achieve. That cite element defines the title of a work (book, song, movie). If you want to caption a picture use figcaption in combination with figure, e.g. 

<figure>
    <img src="http://static.squarespace.com/static/54ac3823e4b0153bb9983ec0/54ace812e4b02240ac8d8758/54aceef8e4b02240ac8e3a26/1420619512639/med_funny-cat.jpg?format=original" width="500" height="688" alt="" />
    <figcaption>Fig.1 - The majestic cat.</figcaption>
</figure>

Example (just in case):

#content > img {
    float: right;
}
#content cite {
    clear: right;
    float: right;      
}
<!DOCTYPE HTML>
<html>
    <head>
        <title>Why am I doing this?</title>
    </head>
    <body>
        <div id="content">
            <img src="http://static.squarespace.com/static/54ac3823e4b0153bb9983ec0/54ace812e4b02240ac8d8758/54aceef8e4b02240ac8e3a26/1420619512639/med_funny-cat.jpg?format=original" width="500" height="688" alt="" />

            <blockquote>Important quote</blockquote>

            <blockquote>To be is to do</blockquote>


            <cite>The Bible</cite>


            <h2>Header</h2>

            <p>Some text</p>

            <ol>
                <li>
                    <img src="https://i.ytimg.com/vi/p2H5YVfZVFw/hqdefault.jpg" width="460" height="194" alt="" />
                </li>   

                <li>
                    <img src="http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg" width="460" height="194" alt="" />
                </li>   

                <li>
                    <img src="https://i.ytimg.com/vi/p2H5YVfZVFw/hqdefault.jpg" width="460" height="194" alt="" />
                </li>   

                <li>
                    <img src="http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg" width="460" height="194" alt="" />
                </li>       

                <li>
                    <img src="https://i.ytimg.com/vi/p2H5YVfZVFw/hqdefault.jpg" width="460" height="194" alt="" />
                </li>       
        </ol>       

    </div>  
</body>
</html>

Upvotes: 1

joffyb
joffyb

Reputation: 1

That's because the CSS selector you're using is selecting all img tags within the content block.

Try a more specific selector, like immediate children: #content > img

Upvotes: 0

Related Questions