CODEWITHSUNDEEP
htmlcss
Nick Alex
Nick Alex

Reputation: 13

The text goes over the image and not under it

The problem is that when I added an image to my html page,and I tried to write something to continue my working,the text was going over the image.I want the text to be going under the image.I don't want to use 50 "br" tags so that I can write under it.Do you know what's the problem guys ?

.poze {
    max-width: 100%;
    margin-top: 0.5em;
    margin-bottom: 1em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px;
    background: white;
    border: 1px solid #CCC;
    border-bottom-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
    padding: 8px;
    "

}
.cerculet {
    display: block;
}
.cerculet:after {
    display: block;
    clear: both;
    content:' ';
}
.cerculet p {
    font-weight: bold;
}
.cerculet h2 {
    font-size: 120%;
    height: 145%;
    width: 1.6em;
    height: 1.6em;
    text-align: center;
    border-radius: 50%;
    background-color: black;
    color: white;
    white-space: nowrap;
    float: left;
    margin-right: 15px;
}

That was the CSS.Now I'll post the html code:

<h2>
    <div class="cerculet">
        <h2>2 </h2>
        <p>
            <font size="5" face="Cambria">
                Gripa Spaniola (1918 - 1919):<br>
                A ucis intre 50 si 100 de milioane de oameni din intreaga<br>
                lume in mai putin de 2 ani
            </font>
        </p>
    </div>
</h2>
<br>
<img src="http://s6.postimg.org/6oyuxe1e9/Spanish_Flu.jpg" class="poze" style="position:absolute; left:150px;">
<div>
    <h1>
        As you can see,the text doesn't go under my image.How to fix this problem guys?
    </h1>
</div>

I hope you'll understand the code.I mean,I used that "4 spaces indent" or whatever and I don't know if that's the right way to post the code.If I copy/paste all,it won't show it right.. https://jsfiddle.net/9hw89uog/

Upvotes: 1

Views: 4317

Answers (2)

Boris
Boris

Reputation: 586

Here is one solution: https://jsfiddle.net/73s1c4h1/2/ 

<div class="clearfix">
    <img src="https://images.nga.gov/images/bindo.jpg" class="poze"style="margin-left:150px;">
    <div>
        <h1 >
            Now the text should be clear of the image and positioned below it. 
        </h1>
    </div>
</div>

This involves using the all famous "clearfix" CSS solution. You will need to wrap the image and text in a div, then place class="clearfix" in that div. The clearfix CSS is here: https://css-tricks.com/snippets/css/clear-fix/ It will force the div element to clear the children elements.

Clearfix CSS:

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

The second solution is a bit simpler; just set position: relative; rather than absolute. https://jsfiddle.net/73s1c4h1/1/

You may also need to change left: 150px to margin-left: 150px

Upvotes: 0

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

Remove position:absolute from your image styles, it is an inline style in your case

Upvotes: 1

Related Questions