Float Right is superimposing div and invading div from below

Asked

Viewed 982 times

4

Hey guys, I’m here one more time asking for help, I tried everything, I even used overflow:hidden, but it got much worse, so I need help, I have

The code of 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 code of the right float:

    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 it looks: Como está Jsfiddle: https://jsfiddle.net/Lqc6m1h6/1/

css floating

  • Make html/css color/relevant to facilitate problem resolution sff

  • @Miguel O Css está colocado, da div com float:right and the div Parent.

  • It made it easy to see the html too, the relevant one, only that I can’t be objective and I’d be guessing. Why don’t you make a jsfiddle? sff

  • @Miguel Jsfiddle added, it is difficult to see this problem there, but I put it the same way.

  • What did you mean? When you say that "it got much worse" what is left?

  • It cuts the image into a few screen sizes, I tried to use instead of a float text-align:right, but unsuccessfully, and the float keeps making the div go right which is necessary, but also makes it overlap the div, and that’s bad because it goes to the lower div, sometimes forcing the <h2> adapt by going left.

  • Let’s go continue this discussion in chat.

  • 1

    If you use bootstrap, you have tried after the end of the div to create a div <div class="clearfix"></div>?

  • 1

    @Gustavotinoco Make a reply there, got it well, thanks, I had forgotten this code, I don’t even use bootstrap but I remembered the code inside it, thank you very much! : D

Show 4 more comments

1 answer

2


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>

Browser other questions tagged css floating

You are not signed in. Login or sign up in order to post.