CODEWITHSUNDEEP
htmlcssreactjs
CCCC
CCCC

Reputation: 6471

css - unexpected position of span in side a content area

I am using react-pro-sidebar as the side bar.

export default function App() {
  return (
    <div className="App">
      <NavBar />
      <span>Why is this span here?</span>
    </div>
  );
}

What I am expecting: enter image description here

But actually: enter image description here

CodeSandbox:
https://codesandbox.io/s/ecstatic-mayer-dhem4?file=/src/Navbar/index.js

Update 1
 Why wouldn't it happen in the demo?
https://azouaoui-med.github.io/react-pro-sidebar/

Upvotes: 0

Views: 59

Answers (3)

Angular Dev
Angular Dev

Reputation: 4916

Nikola is correct but its important to understand why this is happening. I assume NavBar is a display block element, and in that case it will take up the full available width. Therefor the span element will end up being rendered under it.

One of the possible solutions is to make their container's display property be flex

Upvotes: 2

Konstantin Modin
Konstantin Modin

Reputation: 1333

.App {
  text-align: center;
  background-color: darkgrey;
  height: 100vh;
  display: flex;  
}

Upvotes: 1

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

You can try to make .App as display: flex; if that's what you looking for

Upvotes: 1

Related Questions