I am a CSS beginner.I want a half transparent centered div with the main content. Below it should be a fixed div containing the table of contents.Below is my attempt on this. This works with a certain browser size. But when the size of the browser window changes, the table of content moves. I want the table of contents to stay at a fixed distance to the main div.jsFiddle linkWith this window size everything looks ok:
Decreasing the window size moves toc under content div:
html\[code\]<html><head> <title>Testpage</title> <link rel='stylesheet' href='http://stackoverflow.com/questions/14468629/css/testpage.css'></head><body> <div id="contenttable"> <h1>Contents</h1> <a href="http://stackoverflow.com/questions/14468629/#">Content 01</a><br> </div> <div id="content"> some text </div></body></html>\[/code\]css:\[code\]#content{ height: 1000px; width: 320px; position: relative; top: 50px; left: 50%; margin-left: -160px; background-color: cyan; }#contenttable{ padding: 12px; width:100%; height:200px; position: fixed; background-color: yellow; top: 125px; left: 6%;}#contenttable a{ position: relative; top: 0px; left: 66%;}#contenttable h1{ position: relative; top: 0px; left: 66%;}\[/code\]