How to display "divs" horizontally? [duplicate]

Question

<div id="Content">
    <div id="loginContent"></div>
    <div id="signupContent"></div>
</div>

I have a root div here. I want to display the child divs horizontally. How to do this?

Answer 1

You mean this?

Flexbox:

#Content {
  display: flex;
}

#loginContent {
  flex: 1;
}

#signupContent {
  flex: 1;
}

Floats:

#loginContent,
#signupContent {
  float: left;
  width: 50%;
}

Inline-block:

#Content {
  text-align: center;
}

#loginContent,
  #signupContent {
  display: inline-block;
}