Mixed inline and block positioning of div content

Question

What I want to acheive, by applying css styles is composition of content:

I apply my style and I got result:

li {
  position: relative;
  list-style-type: none;
  border: 1px;
  border-color: red;
  border-style: solid;
}
div {
  border: 1px;
  border-color: green;
  border-style: solid;
}

div .xx {
  display: inline;
  width:100%;
} 

div .aa {
  position: absolute;
  dislay: inline;
  left: 0;
  width:50%;
}
div .bb {
  position: absolute;
  display: inline;
  right: 0;
  width:50%;
}
div .cc {
  postion: relative;
  display: block;
}

<li>
  <div class="xx">
      <div class="aa">A</div>
      <div class="bb">B</div>
    </div>
  <div class="cc">C</div>
</li>

So "C" is under "A" and "B". Can anybody help me to fix it? Thanks!

Remove all the absolute positioning to start with. You don't need it. — Paulie_D, Mar 20 '18 at 19:23
Why I had to do that? I moved A and B to one line, but what I should use to align content of B to right? — lissajous, Mar 20 '18 at 19:26

score 1 · Answer 1 · answered Mar 20 '18 at 19:36

You can use display:flex; to make the inner divs even width.

li {
  position: relative;
  list-style-type: none;
  border: 1px;
  border-color: red;
  border-style: solid;
}
div {
  border: 1px;
  border-color: green;
  border-style: solid;
}
.xx{
    display:flex;
}
div .aa {
 flex-basis: 100%
}
div .bb {
 flex-basis: 100%
}
div .cc {
  width:100%;
  display: block;
}

<li>
  <div class="xx">
      <div class="aa">A</div>
      <div class="bb">B</div>
    </div>
  <div class="cc">C</div>
</li>

Mixed inline and block positioning of div content

1 Answers1