-1

I have a parent container div with two child divs. I would like div child1 to be horizontally centered and div child2 to appear inline with child1, but off to the side of the page.

When I use the code below, the two child divs inevitably "push" against each other and child 1 gets moved out of the center. I feel like this should be easy but I'm clearly missing something.

.container {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
}

.child1 {
  display: inline-block;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: absolute;
  margin: 0 auto;
}

.child2 {
  display: inline;
  position: absolute;
  right: 10px;
  width: 20%;
}
<div class="container">
    <div class="child1">Kid</div>
    <div class="child2">Kiddo</div>
</div>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
clavesoon
  • 39
  • 1
  • 7

2 Answers2

-1

Grid can help you with this kind of layout:

basic example drawn from a 3 column layout (left and right will use equally the room left from the middle column). 

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  background: linear-gradient(to left, #fff 50%, #ccc 50%);
  /* show center;*/
}

.child1 {
  grid-column: 2
}

.child2 {
  margin-left: auto;
}
<div class="container">
  <div class="child1">Kid</div>
  <div class="child2">Kiddo</div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
-1

Do you need this?

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "... child1 child2";
}

.child1 {
  background: green;
  grid-area: child1;
}

.child2 {
  background: blue;
  grid-area: child2;
  margin-left: auto; /* create gap between both the children */
}
<div class="container">
  <div class="child1">Kid</div>
  <div class="child2">Kiddo</div>
</div>
Sapinder Singh
  • 559
  • 6
  • 21