CODEWITHSUNDEEP
htmlcssreactjs
Tim
Tim

Reputation: 2411

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

Upvotes: 1

Views: 2086

Answers (3)

Zuhair
Zuhair

Reputation: 847

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>

Upvotes: 2

Bryce Howitson
Bryce Howitson

Reputation: 7720

Without seeing the wrapper HTML this is just a guess...

HTML needs a wrapper (could be body)

<div id="mapContainer">
   <div id="sidebar">Sidebar</div>
   <div id="map">Map</div>
</div>

CSS

#mapContainer {
   display:flex;
}
#sidebar {
   flex: 1;
}
#map {
   flex: 9;
}

Also REMOVE these from sidebar nav as they'll defeat the flexbox

position: absolute;
top: 0;
left: 0;
bottom: 0;

Upvotes: 0

Piyush Zalani
Piyush Zalani

Reputation: 3934

if you are using bootstrap then the following code will help:

 class DashboardView extends Component {
    constructor(props) {
        super(props);
      }
      render() {
        return <div className="row">
            <div className="col-md-3">
              <Sidebar />
            </div>
            <div className="col-md-9">
              <Map />
            </div>
        </div>;
      }
    }

Upvotes: -1

Related Questions