Float ignores margin

Question

Float ignores margin

Navigation

#1 by (1 votes)

0

I want to align a div to the right, but keep the margins as they were imposed, except that it ignores them and stays out of the div box. I think with this photo you can see it better

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

Isawthatmanycodesweremissingtoassistyou:

TheCSSofthediv"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 "Questions and Answers" HTML

{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

asked by anonymous 17.11.2018 / 19:20

1 answer

How to separate different values from a foreach Align a logo in the center of the Form

score 1 · Answer 1

The float causes the parent element does not 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 to use "strategically", but could use a div too, eg

.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>