Float ignores the margin

Asked

Viewed 126 times

0

I want to line up a div to the right, but keep the margins as they were imposed, only he ignores them and stays out of the div box. I think with this picture you can see better

inserir a descrição da imagem aqui

.answer {margin: 20px !important; float: right;}

I saw that many codes were missing to help you:

The CSS of the div "box":

.post{background: #fff; border: 1px solid #f0f0f0; padding: 10px; margin: auto auto 30px auto; width: 500px;}

The CSS of this "questions and answers":

.ask{margin: 0; padding: 0;}
.question{margin: 10px; position: relative; top: -10px;}
.asking{color: #012551; font-weight: bold; text-transform: lowercase;}
.answer {margin: 20px !important; float: right;}
.asking-avatar{border-radius: 100%; margin-left: 10px;}
.answer-avatar{border-radius: 100%; float: right;}

The HTML of "questions and answers"

{block:Answer}
    <div class="ask">
        <img src="{AskerPortraitURL-30}" class="asking-avatar"/>
        <span class="question"><span class="asking">{Asker}</span>: {Question}</span>
        <div class="answer">
            <img src="{PortraitURL-30}" class="answer-avatar"/>
            {Answer}
        </div>
     </div>
{/block:Answer}
html css
  • 2

    Since the question does not have a code to see the context, the only thing I can say is: avoid using float. There are other ways to align an element, but without HTML and CSS code you cannot say for sure that it should be done.

1 answer

1

The float causes the parent element not to adapt the height to the content, to solve this it is necessary to use clear: both with an element at the end or with a pseudo-element, an example:

.content {
   border: 1px solid #ccc;
}

.c-l, .c-r {
   border-bottom: 1px solid #ccc;
}

.c-r:last-child {
   border: none;
}

.content img {
    background: #fcfcfc;
    border-radius: 50%;
}

.c-l img {
   margin: 20px;
   float: left;
}
.c-r img {
   margin: 20px;
   float: right;
}

.c-l:after, .c-r:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
<div class="content">
    <div class="c-l">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
    </div>
    
    <div class="c-r">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
    </div>
    <div class="c-l">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
    </div>
    
    <div class="c-r">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
    </div>
    <div class="c-l">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
    </div>
    
    <div class="c-r">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
    </div>
</div>

in the above case I used pseudo element :after, which helps to write less HTML if you know how to use "strategically", but could use a div as well, for example:

.content {
   border: 1px solid #ccc;
}

.c-l, .c-r {
   border-bottom: 1px solid #ccc;
}

.c-r:last-child {
   border: none;
}

.content img {
    background: #fcfcfc;
    border-radius: 50%;
}

.c-l img {
   margin: 20px;
   float: left;
}
.c-r img {
   margin: 20px;
   float: right;
}

div.clear {
    clear: both;
}
<div class="content">
    <div class="c-l">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
        <div class="clear"></div>
    </div>
    
    <div class="c-r">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
        <div class="clear"></div>
    </div>
    <div class="c-l">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
        <div class="clear"></div>
    </div>
    
    <div class="c-r">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
        <div class="clear"></div>
    </div>
    <div class="c-l">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
        <div class="clear"></div>
    </div>
    
    <div class="c-r">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
        <div class="clear"></div>
    </div>
</div>

Browser other questions tagged html css

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