Home/ Questions/Q 9188293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T19:58:17+00:00

I am a CSS beginner. I want a half transparent centered div with the

  • 0

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 link

With this window size everything looks ok:
with this window size everything looks ok

Decreasing the window size moves toc under content div:
decreasing the window size moves toc under content div

html

<html>
<head>
    <title>Testpage</title>
    <link rel='stylesheet' href='css/testpage.css'>
</head>
<body>
    <div id="contenttable">
        <h1>Contents</h1>
        <a href="#">Content 01</a><br>
    </div>
    <div id="content">  
        some text
    </div>
</body>
</html>

css:

#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%;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use an inner div absolutely positioned inside the fixed TOC, and set its position.

    Use CSS3 Calc to elaborate the right position for your main content.

    Use opacity for transparency, and avoid setting the height of the main content div for automatic overflow handing.

    Demo: http://jsfiddle.net/vMAQz/1/

    CSS

    #contenttable {
  padding: 12px;
  width:100%;
  height:200px;
  position: fixed;
  background-color: yellow;
  top: 125px;
}
#innerContent {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  padding: 30px;
}
#content {
  padding: 10px;
  opacity: 0.8;
  width: 320px;
  position: relative;
  top: 50px;
  left: calc(100% - 480px);
  background-color: cyan;
}

    HTML

    <div id="contenttable">
  <div id="innerContent">
    <h1>Contents</h1>
    <a href="#">Content 01</a>
    <br/>
  </div>
</div>
<div id="content">
   some text
</div>
    • 0