CODEWITHSUNDEEP
htmlcss
user3424543
user3424543

Reputation: 3

HTML - How to stop div overlap

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

Answers (1)

CRABOLO
CRABOLO

Reputation: 8793

This is how you can stop them from overlapping.

DEMO

#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

Related Questions