Float Right is overlapping div and invading low div

Question

Float Right is overlapping div and invading low div

Navigation

#1 by (1 votes)

2

So, I'm here again, asking for help, I tried everything, I even used overflow:hidden , but it got much worse, so I need help, I have

The code for the div:

    width: 100%;
    display: block;
    background: #FFF;
    padding: 2em 3em;
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 11pt;
    color: #656565;
    line-height: 130%;

The float code right:

    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
    float: right;
    margin: 5px 0 20px 20px;

Photo of How to stay: JsFiddle: link

css floating

asked by anonymous 28.07.2016 / 16:41

1 answer

Camera problems: Fail to connect to camera service Struct or Classes?

score 1 · Accepted Answer

It's simple, follow the example ....

Example:

  .clearfix {
    overflow: auto;
  }

.elem {
    border: solid #6AC5AC 3px;
    position: relative;
}

.clear {
    clear: both;
}

     
       <div class="elem">
         
        <img style="float:right" src="http://pt-br.learnlayout.com/images/ilta.png"alt="An Image">
        <p>
<span>Pareçe que ficou estranho a imagem do lado com este conteúdo digitado não é mesmo??</span>
        </p>

    
   </div>
<div class="clear">Adicione a clearfix agora..</div>
<br><br>
      <div class="elem clearfix">
         
        <img style="float:right" src="http://pt-br.learnlayout.com/images/ilta.png"alt="An Image">
        <p>

<span>Normalizou agora? Parece que ficou normal....</span>
        </p>

    
   </div>