Align multiple div next to each other (fixed)

Question

I'd like to align multiple (in this case 3) divs in a custom MainDiv to get a result like this:

<div style="position: fixed; width:100%; height: 12%; left:0%; top: 0%; background: black">
  <div style="color: white; left: 5%; margin-top: 5%; position: fixed; font-size: 10px">INFORMATION A</div>
  <div style="color: white; margin:0 auto; margin-top: 5%; display: table; font-size: 10px">INFORMATION B</div>
  <div style="color: white; right: 5%; margin-top: 5%; position: fixed; font-size: 10px">INFORMATION C</div>
</div>

But this code doesn't seem to be working because this is the result I'm getting:

How can I fix this?

Do you need it to be position fixed? – Andrew Bone Feb 12 '18 at 14:03 — Andrew Bone, Feb 12 '18 at 14:03

score 0 · Answer 1 · answered Feb 12 '18 at 13:59

0

you can use flex-layouting

<div style="position: fixed; width:100%; height: 50%; left:0%; top: 0%; background: black; display: flex; justify-content: space-between;">                           
  <div style="color: white; left: 5%; margin-top: 5%; position: fixed; font-size: 10px">INFORMATION A</div>
  <div style="color: white; margin:0 auto; margin-top: 5%; display: table; font-size: 10px">INFORMATION B</div>
  <div style="color: white; right: 5%; margin-top: 5%; position: fixed; font-size: 10px">INFORMATION C</div>
</div>

answered Feb 12 '18 at 13:59

FrontTheMachine

526
3
14

flex laout with position fixed ? – Temani Afif Feb 12 '18 at 14:01
yes? the flex-layout change the behaviour of its content to be flexible, doesn't care about being fixed positioned. – FrontTheMachine Feb 12 '18 at 14:04
really ?? read this : Fixed : The element *is removed from the normal document flow*; no space is created for the element in the page layout. – Temani Afif Feb 12 '18 at 14:06
@kurtwellitis please don't consider bad hack like this ... adding flex work in this case simply because one of the element is not fixed and thus belong to the flow ... so it was changed to flex item and is no more a block item ! – Temani Afif Feb 12 '18 at 14:08
Your right @TemaniAfif – Feb 12 '18 at 14:09
@kurtwellitis add `top: 0;` in the initial code to the third div ... or re-consider all your code to use proper way of flex or any other technique and don't do this ! – Temani Afif Feb 12 '18 at 14:09

Align multiple div next to each other (fixed)

1 Answers1