Good afternoon!
I'm trying to create a navigation div, but because I want the navigation to have vertical scrollbars when necessary I've put the overflow property to auto. I also put several div inside the navigation with width equal to 100%, so they occupy all horizontal space.
This works correctly in IE6 but in Mozilla Firefox an extra horizontal scrollbar appears and child elements in the navigation div appear to have more than 100% width.
Can anyone help me?
Here is the code:
<html>
<head>
<title>Navigation</title>
<style>
html, body {
width: 100%;
height: 98%;
background-color: #ffeecc;
padding: 0px;
margin: 0px;
}
.main {
width: 98%;
height: 98%;
padding: 0px;
margin-top: 1%;
margin-bottom: 1%;
margin-left: 1%;
margin-rigth: 1%;
background-color: #ddbbaa;
}
.nav {
width: 30%;
height: 100%;
float: left;
background-color: #cc99aa;
overflow: auto;
padding: 0px;
margin: 0px;
}
.nav_item {
width: 100%;
background-color: #ddbbaa;
border: 1px solid Black;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div class="main">
<div class="nav">
<div class="nav_item">Item 1</div>
<div class="nav_item">Item 2</div>
<div class="nav_item">Item 3</div>
<div class="nav_item">Item 4</div>
<div class="nav_item">Item 5</div>
<div class="nav_item">Item 6</div>
<div class="nav_item">Item 7</div>
<div class="nav_item">Item 8</div>
<div class="nav_item">Item 9</div>
<div class="nav_item">Item 10</div>
<div class="nav_item">Item 11</div>
<div class="nav_item">Item 12</div>
<div class="nav_item">Item 13</div>
<div class="nav_item">Item 14</div>
<div class="nav_item">Item 15</div>
<div class="nav_item">Item 16</div>
<div class="nav_item">Item 17</div>
<div class="nav_item">Item 18</div>
<div class="nav_item">Item 19</div>
<div class="nav_item">Item 20</div>
<div class="nav_item">Item 21</div>
<div class="nav_item">Item 22</div>
<div class="nav_item">Item 23</div>
<div class="nav_item">Item 24</div>
<div class="nav_item">Item 25</div>
<div class="nav_item">Item 26</div>
<div class="nav_item">Item 27</div>
<div class="nav_item">Item 28</div>
<div class="nav_item">Item 29</div>
<div class="nav_item">Item 30</div>
<div class="nav_item">Item 31</div>
<div class="nav_item">Item 32</div>
<div class="nav_item">Item 33</div>
<div class="nav_item">Item 34</div>
<div class="nav_item">Item 35</div>
<div class="nav_item">Item 36</div>
</div>
</div>
</body>
</html>Take width: 100%; out of .nav_itemHello Fang!
Thanks for the quick answer.
Bye,
Migrate
I'm trying to create a navigation div, but because I want the navigation to have vertical scrollbars when necessary I've put the overflow property to auto. I also put several div inside the navigation with width equal to 100%, so they occupy all horizontal space.
This works correctly in IE6 but in Mozilla Firefox an extra horizontal scrollbar appears and child elements in the navigation div appear to have more than 100% width.
Can anyone help me?
Here is the code:
<html>
<head>
<title>Navigation</title>
<style>
html, body {
width: 100%;
height: 98%;
background-color: #ffeecc;
padding: 0px;
margin: 0px;
}
.main {
width: 98%;
height: 98%;
padding: 0px;
margin-top: 1%;
margin-bottom: 1%;
margin-left: 1%;
margin-rigth: 1%;
background-color: #ddbbaa;
}
.nav {
width: 30%;
height: 100%;
float: left;
background-color: #cc99aa;
overflow: auto;
padding: 0px;
margin: 0px;
}
.nav_item {
width: 100%;
background-color: #ddbbaa;
border: 1px solid Black;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div class="main">
<div class="nav">
<div class="nav_item">Item 1</div>
<div class="nav_item">Item 2</div>
<div class="nav_item">Item 3</div>
<div class="nav_item">Item 4</div>
<div class="nav_item">Item 5</div>
<div class="nav_item">Item 6</div>
<div class="nav_item">Item 7</div>
<div class="nav_item">Item 8</div>
<div class="nav_item">Item 9</div>
<div class="nav_item">Item 10</div>
<div class="nav_item">Item 11</div>
<div class="nav_item">Item 12</div>
<div class="nav_item">Item 13</div>
<div class="nav_item">Item 14</div>
<div class="nav_item">Item 15</div>
<div class="nav_item">Item 16</div>
<div class="nav_item">Item 17</div>
<div class="nav_item">Item 18</div>
<div class="nav_item">Item 19</div>
<div class="nav_item">Item 20</div>
<div class="nav_item">Item 21</div>
<div class="nav_item">Item 22</div>
<div class="nav_item">Item 23</div>
<div class="nav_item">Item 24</div>
<div class="nav_item">Item 25</div>
<div class="nav_item">Item 26</div>
<div class="nav_item">Item 27</div>
<div class="nav_item">Item 28</div>
<div class="nav_item">Item 29</div>
<div class="nav_item">Item 30</div>
<div class="nav_item">Item 31</div>
<div class="nav_item">Item 32</div>
<div class="nav_item">Item 33</div>
<div class="nav_item">Item 34</div>
<div class="nav_item">Item 35</div>
<div class="nav_item">Item 36</div>
</div>
</div>
</body>
</html>Take width: 100%; out of .nav_itemHello Fang!
Thanks for the quick answer.
Bye,
Migrate