Can't use # in url to immediately go to 3 (e.g. index.html#3), why?

Question

First apologies, I am still a rookie and not a programmer, just a bit of self-tutored html-designer (more or less) and stuck with a problem for which I searched a solution for almost weeks.

I am building a glossary and have a scrollable column on the left with entries, each with a <a href=index.html#302>blah </a> linking to the main window with the same word followed by an explanation. The main window consists of a parent and a child. The child is merely a bit wider, 104%, to hide the y-scrollbar. Each entry is a fully designed div-element with margin-bottom:300em; to give the outer appearance of a pop-up when one clicks on an entry in the left window with words.

What troubles me is that I cannot jump to a word with say <div class=ov id=203> with index.html#203 typed in the url, nor can I use alt-arrow-left to go back in history (I only see the # numbers change in the url on top but the page stays the same). The links in the left column work fine, though. It also works fine when I strip all surrounding windows and make it a bare html-page, without nested divs. Can anyone explain why this is so and what I can do to be able to jump to a # by typing a #-number in the url? I tried with adding several positioning-styles to the div-child with the text, but to no avail.

Many, many thanks!

Example: Scrollable column left

<div class=trefw>
<a class=w href=#1>xxxxx </a>
<a class=w href=#2>ccccc </a>
<a class=w href=#3>dfasdfasd </a>
<a class=w href=#4>sdfzdfasdf </a>
</div>

Main text

<div class=context>
<div class=context1>
<div class=ov id=1><p3>xxxx</p3>xxxx</div>
<div class=ov id=2><p3>cccc</p3>cccccc</div>
<div class=ov id=3><p3>dfasdfasd </p3>dfasdfasd </div>
<div class=ov id=4><p3>sdfzdfasdf </p3>sdfzdfasdf </div>
</div></div>

CSS:

.trefw {
position:fixed;
top: 60px;
left: 0px;
bottom: 0px;
width: 200px;
height:auto;
overflow-y:auto;
overflow-x:hidden;
z-index:499;
}

.context {
position:fixed;
top: 180px;
width:auto;
height:auto;
left: 210px;
right: 100px;
bottom: 30px;
overflow:hidden; 
z-index:70; 
}


.context1 {
position:relative;
width:104.5%;
height:100%;
overflow-y:scroll;
}

.ov {
font-family:basr;
text-align:left;
margin:20px;
height:auto;
margin-bottom:300em;
width:80%;
padding:28px;
border-radius:22px;
background-color:#fff;
-webkit-box-shadow: 9px 9px 15px 0px  rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 9px 9px 15px 0px  rgba(0, 0, 0, 0.5); 
box-shadow: 9px 9px 15px 0px  rgba(0, 0, 0, 0.5);
}