How can I automatically fill margin for remainder space?

Question

I gave an id to every 3 blocks as follow: #HEAD-LEFT, #HEAD-CENTER and #HEAD-RIGHT. All 3 blocks are floated to the left. I want to make more blocks below the #HEAD-LEFT.

Unfortunately, the string goes up, because there is extra space at the right side of #HEAD-RIGHT. I know it can be solved if I calculate pixel and give margin-right. Is there any way of giving margin-right automatically to fill extra space?

I tried margin-right: auto; but it doesn`t work.

Please don`t use a grid to solve this problem.

CSS:

#HEAD-LEFT{
    font-family: 'Indie Flower', cursive;
    font-size:40px;
    float:left;
    height: 117.4px;
    border-left:2px black solid;
    border-top:2px black solid;
    border-bottom:2px black solid;
    margin-left:258.5px;
    padding-left:30px;
    padding-right: 30px;
    padding-top:45px;
    margin-top:20px;
}

#HEAD-CENTER{
    font-family: 'Indie Flower', cursive;
    font-size: 70px;
    text-align: center;
    letter-spacing: 15px;
    padding: 30px;
    border: 2px black solid;
    width: 500px;
    float: left;
    margin-top:20px;
}

#HEAD-RIGHT{
    font-family: 'Indie Flower', cursive;
    font-size:40px;
    float:left;
    height: 117.4px;
    border-right:2px black solid;
    border-top:2px black solid;
    border-bottom: 2px black solid;
    padding-left:30px;
    padding-right: 30px;
    padding-top:45px;
    margin-top: 20px;
}

This is what [clear](https://www.w3.org/TR/CSS22/visuren.html#flow-control) is for. — Alohci, Dec 16 '18 at 02:05
@Alohci - please provide your answer as an answer so this question shows as having an answer that Daniel Hong can accept. That's what stackoverflow is for. — Fred Gandt, Dec 16 '18 at 06:13

score 1 · Accepted Answer · answered Dec 16 '18 at 06:39

CSS flexbox is great for this kind of issue - check it out - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  display: flex;
  justify-content: center;
  height: 300px; /* Or whatever */
  border: 1px solid #000;
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  border: 1px solid #2f2;
}

<div class="parent">
<span class="child">One</span>
<span class="child">Two</span>
<span class="child">Three</span>
</div>

How can I automatically fill margin for remainder space?

1 Answers1