How to display "divs" horizontally?

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?

Change their display, use flexbox, use css grids, there are lots of options. — Quentin, Sep 18 '14 at 18:26
They already display horizontally by default, so I imagine you mean vertically? — DeFeNdog, Sep 18 '14 at 18:28
The issue is, if I change the display(inline-block) or float(left), they both go to left with the second div lying under the first one — Xiaojian, Sep 18 '14 at 18:38

DeFeNdog · Accepted Answer · 2020-09-04T17:33:00.143

10

You mean this?

#Content {
  display: flex;
}

#loginContent {
  flex: 1;
}

#signupContent {
  flex: 1;
}

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

#Content {
  text-align: center;
}

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

edited Sep 04 '20 at 17:33

answered Sep 18 '14 at 18:27

DeFeNdog

The issue is, if I change the display(inline-block) or float(left), they both go to left with the second div lying under the first one.. – Xiaojian Sep 18 '14 at 18:39

score 0 · Answer 2 · answered Sep 18 '14 at 18:29

0

Use inline-block Fiddle:

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

}

or you can use float Fiddle:

#signupContent {
float: right;

}

answered Sep 18 '14 at 18:29

Sergey6116

2 Answers2