Reputation: 3
I have a div that I am using as a "sidepanel" that has a width:100% and position:fixed. this sidepanel houses my navigation. I also have another div that is named "content". it has a width of 600px and I have used to "margin-left:auto, margin-right:auto" to centre it in between the sidepanel and the edge of the page.
But the problem is that it the two divs are overlapping. how do I stop it from overlapping? I have included the HTML and CSS coding below.
HTML
<body>
<div id="leftpanel">
<div id="nav">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="">the future</a></li>
<li><a href="">contact details</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="header">
<p><img src="images/haroon-ahmed.png" class="imgaligncentre"/></p>
</div>
</div>
</body>`
CSS
#leftpanel {
float:left;
height:100%;
width:320px;
postion:fixed;
}
#content {
width:600px;
padding-top:50px;
padding-bottom:50px;
margin-right:auto;
margin-left:auto;
}
Upvotes: 0
Views: 1173
Reputation: 8793
This is how you can stop them from overlapping.
#content {
margin-left: 320px;
}
When you use position:fixed;
, it means that element does not care about the other elements on the page. It does not care if it's touching them, over them, underneath them. It only cares about it's position relative to the window (ie: the user's screen).
So because your #leftpanel
is on the very left side, and has width of 320. Just set a margin-left of the #content
to 320px.
Upvotes: 1