Search code examples
htmlcssreactjs

CSS: Getting my sidebar to not be on top of my other content

I'm currently trying to make it such that my sidebar (shown in the picture) doesn't display on top of my map. I would like them to be side-by-side but not quite sure of how to do it with the css. enter image description here This is what it looks like inside the inspector enter image description here

I would appreciate any help! I've been stuck on this for a little while now :-(

I've tried remove z-index but that just hides the sidebar

EDIT: How I'm calling these components (both are from libraries)

class DashboardView extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div>
        <div>
          <Sidebar />
        </div>
        <div>
          <Map />
        </div>
    </div>;
  }
}

EDIT2: Here is the map's styles. Adding margin-left: 64px solves the problem but is there another alternative where I don't have to hardcode 64px? enter image description here

Solution

  • This is because you specified position:absolute and thus the object(your sidenav) will be placed to the exact position that you specified(top:0; left:0 and so on). removing css position property and adding float:left might solve your problem. I cant give you the exact solution because you didn't share your HTML code. See the following example and try to add position : absolute to the first div tag: 

    <div style="float:left;top:0; width: 100px;height: 100px; background-color: yellow">float left</div>
<div style="float:left; width: 100px;height: 100px; background-color: green">float left</div>