Home/ Questions/Q 8865201
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T16:26:40+00:00

Am trying to prepare the divs so that I can insert content and style

  • 0

Am trying to prepare the divs so that I can insert content and style them, However when zooming within Firefox and IR the DIVS go on eachother and overlap. Can you explain what needs to be done as there are many different but confusing solutions which did not work in my case.

Thanks

HTML

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>My Website</title>
<!-- TemplateEndEditable -->
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
<div id = "container">
  <ul id="nav">
    <li><a href="../about.php">About</a></li>
    <li><a href="../hobbies.php">Hobbies</a></li>
    <li><a href="../contact.php">Contact</a></li>
  </ul>

  <div id = "container1">

  container1
  </div>

  <div id = "container2">
  container 2

  </div>
    <div id = "container3">
  container 3

 </div>
   </div>

</body>
</html>

CSS

 /* CSS Document */

body {

    margin: 0px;


}

#container {

position:relative;
min-height: 800px;
margin:5%;  
background-color:#FFC;
height: 100%;
width: 90%;
overflow: hidden;


}

#container1 {


position:absolute;
margin-left: 10%;   
margin-right: 10%;
margin-top: 10%;
overflow: hidden;
background-color:#6FA;
height: 30%;
width: 80%;


}

#container2 {


position:absolute;
margin-left: 10%;
margin-top: 45%;
background-color:#09C;
overflow: hidden;
height: 30%;
width: 37%;
float:left;


}

#container3 {


position:absolute;
margin-left: 53%;
margin-top: 45%;
margin-right: 10%;
background-color:#6FE;
overflow: hidden;
height: 30%;
width: 37%;
float:right;


}



#nav  {

width: 750px;
margin-left: 10%;   
padding: 0%;
list-style:none;


}

#nav li {

    float:left;

}

#nav a {

    display:block;
    font-weight:bold;
    text-align:center;
    width:150px;
    text-decoration:none;
    background-color:#DBDBDB;
    color:#03F;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;

}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you’re using absolute positioning with margin settings that work with %s, you’re going to almost inevitably run into some overlapping or layout issues as depending on the screen size of the user and what zoom level they’re at your format can be wildly different. A more usual approach is to design your page at a certain size using margin %s sparingly, if at all. While or after building you can zoom in and out and ensure that the format stays as you wanted it.

    That being said, I did go through your HTML and CSS a bit and added wrappers for your header and content sections, then made the containers positioned relative. I kept in all the margin %s as you had it and it’s much more stable and works on Firefox as well (unless you zoom out so much that nothing would be even remotely legible anyway).

    Here’s the fiddle

    • 0