Elements overlapping

+1 Johnn Smith · July 9, 2015
Hi guys!

I'm building a web site and I came across a problem - the elements are overlapping when I zoom in. All of the elements are divs and inside them I have headings, paragraphs, links and lists. Basically I have something like this: 

<!DOCTYPE html>
<html>
<head>
     <title>Web design</title>
</head>

<body>
<div id="wrapper">
     <div id="text1">
          <h3>Heading 1</h3>
          <p>Long Tex 1t</p>
     </div>

     <div id="text2">
          <h3>Heading 2</h3>
          <p>Long Text 2</p>
     </div>
</div>

<div id="nav">
<h3>Navigation</h3>
     <ul>
          <li> List Element 1 <br /> </li>
          <li> List Element 2 <br /> </li>
          <li> List Element 3 <br /> </li>
    </ul>
</div>

</body>
</html>

and I want to get something like this:

/images/forum/upload/2015-07-09/9f368172fb5d2979ad38d831afb027f9.png
I want to position the #nav div on the left site and fix it right there, something like a navigation bar, and all my other content just right of the #nav div, but when I zoom in i don't want my elements to overlap.

If somebody could tell me how to fix this I would be very grateful.

Thank you :) 

Post a Reply

Replies

Oldest  Newest  Rating
0 pooja vasavada · July 15, 2015
can we have your css so we can got the problem please
  • 1

HTML / CSS / Web Design

107,208 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators