Clever Geek Handbook

Image overlaps the border of the DOM element

I have a problem with CSS. The floating image on my page overlaps the paragraph border.

The style looks like this:

.paragraph {
    border:1px solid #DDDDDD;
}

.image {
    float:right;
}

Here is the print screen:

enter image description here

My question is, how do I get myself to behave like this?

enter image description here

Here is a JSfiddle . Thanks in advance guys!

+3


source to share


3 answers


After hours of research, I found a very simple solution.

We just need to add one line of code to the boxing paragraph:

overflow: hidden;



See the JSFiddle for the result .

But thanks anyway!

+4


source


First change your HTML structure to something like this

        <div class="left-content">
            <p class="boxed-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, ipsam, labore excepturi vel corporis libero facere impedit odio similique ipsa architecto mollitia dignissimos eveniet quaerat.</p>
            <p class="boxed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, ipsam, labore excepturi vel corporis libero facere impedit odio similique ipsa architecto mollitia dignissimos eveniet quaerat optio nulla totam voluptatem! Tenetur.</p>
        </div>


            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png" alt="HTML5_logo" class="image-right">

            <div class="clearfix"></div>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, ipsam, labore excepturi vel corporis libero facere impedit odio similique ipsa architecto mollitia dignissimos eveniet quaerat optio nulla totam voluptatem! Tenetur.</p>


After that, the following CSS was added:

.boxed {
    padding:20px 40px;
    border:1px solid #DDDDDD;
 }
.image-right {
    float:right;
    width:150px;
}
.left-content {
    float: left;
    margin-bottom: 30px;
    width: 80%;
}
.boxed-1{
    margin-bottom:10px;
}
.clearfix{
    clear:both;
}
+2


source


You can try this, http://jsfiddle.net/yx3o7z1v/11/ .

I changed the width to percentages and gave the box a width.

    .boxed {
    padding:20px 40px;
    border:1px solid #DDDDDD;
    width:60%;
}
.image-right {
    float:right;
    width:20%;
    max-width:150px;
    position:relative;
}

p { position:relative; }
0


source






More articles:


All Articles