Не могу использовать # в URL, чтобы сразу перейти к 3 (например, index.html#3), почему?

Question

Первые извинения, я все еще новичок, а не программист, просто немного самообучаемый html-дизайнер (более или менее) и застрял с проблемой, для которой я искал решение в течение почти недель.

Я строю глоссарий и у меня есть прокручиваемый столбец слева с записями, каждый с <a href=index.html#302>blah </a> ссылка на главное окно с тем же словом с последующим объяснением. Главное окно состоит из родителя и ребенка. Ребенок чуть шире, 104%, чтобы скрыть полосу прокрутки y. Каждая запись представляет собой полностью разработанный элемент div с margin-bottom:300em; чтобы создать внешний вид всплывающего окна, когда кто-то нажимает на запись в левом окне со словами.

Меня беспокоит то, что я не могу перейти к слову <div class=ov id=203> с index.html#203 напечатанный в URL, также я не могу использовать alt-arrow-left, чтобы возвратиться в историю (я только вижу изменение числа # в url вверху, но страница остается той же). Хотя ссылки в левом столбце работают нормально. Он также прекрасно работает, когда я удаляю все окружающие окна и делаю его голой html-страницей без вложенных элементов div. Может кто-нибудь объяснить, почему это так и что я могу сделать, чтобы иметь возможность перейти на #, введя #-номер в URL? Я попытался добавить несколько стилей позиционирования к div-потомку с текстом, но безрезультатно.

Большое большое спасибо!

Пример: прокручиваемый столбец слева

<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>

Основной текст

<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);
}