dock child elements in all corners of parent element - html

I have the following html5 body:
<body>
<div id="container">
<div class="content" id="topleft">topleft</div>
<div class="content" id="topcenter">topcenter</div>
<div class="content" id="topright">topright</div>
<div class="content" id="centerleft">centerleft</div>
<div class="content" id="centercenter">centercenter</div>
<div class="content" id="centerright">centerright</div>
<div class="content" id="bottomleft">bottomleft</div>
<div class="content" id="bottomcenter">bottomcenter</div>
<div class="content" id="bottomright">bottomright</div>
</div>
</body>
And I would like to achieve a dynamic layout that looks this:
Where as each content element should be layed out (docked) in the corners relative to its parent container and all center elements should be centered at the respective sides. It should not matter what size or position the parent container has, so I cannot use absolute pixel coordinates for positioning.
This is what I have so far:
div#container {
background: lightblue;
position: relative;
width: 500px;
height: 500px;
}
div.content
{
width: 100px;
height: 100px;
position: absolute;
background: lightyellow;
text-align: center;
margin: auto;
}
div#topleft {
}
div#topcenter {
right: 50%; /*obviously doesn't center*/
}
div#topright {
right: 0px;
}
div#centerleft {
top: 50%; /*obviously doesn't center*/
left: 0px;
}
div#centercenter {
top: 50%; /*obviously doesn't center*/
right: 50%; /*obviously doesn't center*/
}
div#centerright {
right: 0px;
top: 50%; /*obviously doesn't center*/
}
div#bottomleft {
bottom: 0px;
}
div#bottomcenter {
bottom: 0px;
right: 50%; /*obviously doesn't center*/
}
div#bottomright {
right: 0px;
bottom: 0px;
}
It all works fine for the corners but of course all the center elements are not aligned centered and I understand why. I just don't know, how is this done in CSS3...


To vertically center a fixed-height element in its parent, use:
top:50%;
margin-top:-50px;
For horizontal you can do the same with left and margin-left, or just not define anything and use "margin:0 auto" since it automatically fills them up equally left and right then.

Related

Why does this container expand beyond the viewport?

I have a container that contains 4 colored blocks. I have styled the container to be 27px from the top of the viewport, and 2% from the left (this works). However, I want the right and bottom sides of this container to stop at the viewport, but instead it is going beyond it.
The blocks in the example below are thus slightly out of the viewport.
What am I doing wrong?
Please note that in the code below, the top row is almost 30 pixels higher than the bottom row because the container is not within the viewport completely.
I have a feeling it has to do with the wrapper container itself, specifically with the height and width as it is taking account of the margins that I gave it while still having a 100% height and width, but I am not sure.
Edit : When running the code below, it should be obvious there is a problem since the blocks are not all equal size due to the wrapper overflow.
body {
margin:0;
padding:0;
overflow: hidden;
}
#wrapper {
position: relative;
width: 100vw;
height: 100vh;
margin-top: 27px;
margin-left: 2%;
}
.square {
position: absolute;
width: 50%;
height: 50%;
}
#square1 {
top: 50%;
left: 0;
background-color: blue;
}
#square2 {
top: 50%;
left: 50%;
background-color: yellow;
}
#square3 {
top: 0;
left: 0;
background-color: green;
}
#square4 {
top: 0;
left: 50%;
background-color: red;
}
<div id="wrapper">
<div id='square1' class="square"></div>
<div id='square2' class="square"></div>
<div id='square3' class="square"></div>
<div id='square4' class="square"></div>
</div>

You can use calc to account for the margin:
body {
margin:0;
padding:0;
}
#wrapper {
position: relative;
width: calc(100vw - 2%);
height: calc(100vh - 27px);
margin-top: 27px;
margin-left: 2%;
}
.square {
position: absolute;
width: 50%;
height: 50%;
}
#square1 {
top: 50%;
left: 0;
background-color: blue;
}
#square2 {
top: 50%;
left: 50%;
background-color: yellow;
}
#square3 {
top: 0;
left: 0;
background-color: green;
}
#square4 {
top: 0;
left: 50%;
background-color: red;
}
<div id="wrapper">
<div id='square1' class="square"></div>
<div id='square2' class="square"></div>
<div id='square3' class="square"></div>
<div id='square4' class="square"></div>
</div>

The margins are added to width and heigth properties, so 100vh height plus a margin of 27px will result in the bottom of the element being 27px below the viewport bottom. To avoid this, you can use height: calc(100vh - 27px).

Why can't I set the margin of this wrapper?

I have a problem that I can't figure out despite an hour of YouTube videos and looking on here. I have 4 divs inside of a wrapper. I would like the wrapper to have a top margin of 27px, and a left margin of 2%. For the bottom and right sides, I would like it to automatically expand to the edge of the screen. (Viewport) What am I doing wrong here?
My code is below, and I have a fiddle at
However, the wrapper seems to do nothing and the div content starts at the edge of the screen no matter what I put in the CSS.
.wrapper {
margin: 27px auto auto 2%; // Does nothing
position:absolute;
}
#square1 { position:absolute; top:50%; width:50%;height:50%;left:0;background-color:blue}
#square2 { position:absolute; top:50%; width:50%;height:50%;left:50%;background-color:yellow}
#square3 { position:absolute; top:0; width:50%;height:50%;left:0;background-color:green}
#square4 { position:absolute; top:0; width:50%;height:50%;left:50%;background-color:red}
<div id="wrapper">
<div id='square1'></div>
<div id='square2'></div>
<div id='square3'></div>
<div id='square4'></div>
</div>

To select an element with id (wrapper in your code) you need to use '#' instead of '.'.
If you want to position something absolute, you need to position it direct/indirect parent relative, to let the browser know relative to which element place that absolutely positioned.
Also auto margins on right and left would center element (element is in the center if space from right and left are equal), but to span the element across you need to specify it's width. Keep in mind that margin in percents would be calculated from parent sizes.
Moreover if you have only absolutely position content inside element (wrapper) it would have zero height and you need to specify it explicitly.
As a side note, try to avoid repeting yourself. All squares have same properties, so combine it to new selector (square).
#wrapper {
position: relative;
width: 100%;
height: 100vh;
margin-top: 27px;
margin-left: 2%;
}
.square {
position: absolute;
width: 50%;
height: 50%;
}
#square1 {
top: 50%;
left: 0;
background-color: blue;
}
#square2 {
top: 50%;
left: 50%;
background-color: yellow;
}
#square3 {
top: 0;
left: 0;
background-color: green;
}
#square4 {
top: 0;
left: 50%;
background-color: red;
}
<div id="wrapper">
<div id='square1' class="square"></div>
<div id='square2' class="square"></div>
<div id='square3' class="square"></div>
<div id='square4' class="square"></div>
</div>

selector is incorrect, should be id or class
made wrapper relative so child can be absolute otherwise they will stack to window not parent div
made parent div 100% height and width
There is no point of giving auto margin to right and bottom
CSS comment should be /* */
#wrapper {
margin: 27px auto auto 2%;
position:relative;
width:100%;
height:100vh;
}
#square1 {
position: absolute;
top: 50%;
width: 50%;
height: 50%;
left: 0;
background-color: blue
}
#square2 {
position: absolute;
top: 50%;
width: 50%;
height: 50%;
left: 50%;
background-color: yellow
}
#square3 {
position: absolute;
top: 0;
width: 50%;
height: 50%;
left: 0;
background-color: green
}
#square4 {
position: absolute;
top: 0;
width: 50%;
height: 50%;
left: 50%;
background-color: red
}
<div id="wrapper">
<div id='square1'></div>
<div id='square2'></div>
<div id='square3'></div>
<div id='square4'></div>
</div>

your wrapper is not class, it is id. Thats why you should use #wrapper. And it actually works:
just because of position: absolute you don't see the result, because position: absolute works so, it's mean you are using it in wrong way. Read about position. The same result we can get with code below, or with flexs or grids.
#wrapper {
margin: 27px auto auto 2%;
height: 100vh;
}
.square {
width: 49.5%;
height: 50%;
display: inline-block;
}
#square1 {
background-color: blue;
}
#square2 {
background-color: yellow;
}
#square3 {
background-color: green;
}
#square4 {
background-color: red;
}
<div id="wrapper">
<div id='square1' class="square"></div>
<div id='square2' class="square"></div>
<div id='square3' class="square"></div>
<div id='square4' class="square"></div>
</div>

Why do absolutely positioned elements in a flexbox center properly on chrome but not IE11? [duplicate]

I want to place a div (with position:absolute;) element in the center of the window. But I'm having problems doing so, because the width is unknown.
I tried the following CSS code, but it needs to be adjusted because the width is responsive.
.center {
left: 50%;
bottom: 5px;
}
How can I achieve this?

This works for me:
#content {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100px; /* Need a specific value to work */
}
<body>
<div>
<div id="content">
I'm the content
</div>
</div>
</body>

<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>

Responsive Solution
Here is a good solution for responsive design or unknown dimensions in general if you don't need to support IE8 and lower.
.centered-axis-x {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.outer {
position: relative; /* or absolute */
/* unnecessary styling properties */
margin: 5%;
width: 80%;
height: 500px;
border: 1px solid red;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* unnecessary styling properties */
max-width: 50%;
text-align: center;
border: 1px solid blue;
}
<div class="outer">
<div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>
Here is a JS Fiddle
The clue is, that left: 50% is relative to the parent while the translate transform is relative to the elements width/height.
This way you have a perfectly centered element, with a flexible width on both child and parent. Bonus: this works even if the child is bigger than the parent.
You can also center it vertically with this (and again, width and height of parent and child can be totally flexible (and/or unknown)):
.centered-axis-xy {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Keep in mind that you might need transform vendor prefixed as well. For example -webkit-transform: translate(-50%,-50%);

<div style='position:absolute; left:50%; top:50%; transform: translate(-50%, -50%)'>
This text is centered.
</div>
This will center all the objects inside div with position type static or relative.

I just wanted to add if someone wants to do it with a single div tag then here is the way out:
Taking width as 900px.
#styleName {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}
In this case one should know the width beforehand.

Responsive solution
Assuming the element in the div, is another div...
This solution works fine:
<div class="container">
<div class="center"></div>
</div>
The container can be any size (must be position relative):
.container {
position: relative; /* Important */
width: 200px; /* Any width */
height: 200px; /* Any height */
background: red;
}
The element (div) can also be any size (must be smaller than the container):
.center {
position: absolute; /* Important */
top: 50%; /* Position Y halfway in */
left: 50%; /* Position X halfway in */
transform: translate(-50%,-50%); /* Move it halfway back(x,y) */
width: 100px; /* Any width */
height: 100px; /* Any height */
background: blue;
}
The result will look like this. Run the code snippet:
.container {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: blue;
}
<div class="container">
<div class="center"></div>
</div>
I found it very helpful.

Absolute Centre
HTML:
<div class="parent">
<div class="child">
<!-- content -->
</div>
</div>
CSS:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Demo:
http://jsbin.com/rexuk/2/
It was tested in Google Chrome, Firefox, and Internet Explorer 8.

This works for vertical and horizontal:
#myContent{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
And if you want make an element center of the parent, set the position of the parent relative:
#parentElement{
position: relative
}
For vertical center align, set the height to your element. Thanks to Raul.
If you want make an element center of the parent, set the position of the parent to relative

If you need to center horizontally and vertically too:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Searching for a solution, I got the previous answers and could make content centered with Matthias Weiler's answer, but using text-align:
#content{
position: absolute;
left: 0;
right: 0;
text-align: center;
}
It worked with Google Chrome and Firefox.

I understand this question already has a few answers, but I've never found a solution that would work in almost all classes that also makes sense and is elegant, so here's my take after tweaking a bunch:
.container {
position: relative;
}
.container .cat-link {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
z-index: 100;
text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
background-color: white;
}
.color-block {
height: 250px;
width: 100%;
background-color: green;
}
<div class="container">
<a class="cat-link" href="">Category</a>
<div class="color-block"></div>
</div>
It is saying give me a top: 50% and a left: 50%, then transform (create space) on both the X/Y axis to the -50% value, in a sense "create a mirror space".
As such, this creates an equal space on all the four points of a div, which is always a box (has four sides).
This will:
Work without having to know the parent's height / width.
Work on responsive.
Work on either X or Y axis. Or both, as in my example.
I can't come up with a situation where it doesn't work.

Flexbox can be used to center an absolute positioned div.
display: flex;
align-items: center;
justify-content: center;
.relative {
width: 275px;
height: 200px;
background: royalblue;
color: white;
margin: auto;
position: relative;
}
.absolute-block {
position: absolute;
height: 36px;
background: orange;
padding: 0px 10px;
bottom: -5%;
border: 1px solid black;
}
.center-text {
display: flex;
justify-content: center;
align-items: center;
box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}
<div class="relative center-text">
Relative Block
<div class="absolute-block center-text">Absolute Block</div>
</div>

This is a mix of other answers, which worked for us:
.el {
position: absolute;
top: 50%;
margin: auto;
transform: translate(-50%, -50%);
}

This works on any random unknown width of the absolute positioned element you want to have in the centre of your container element:
Demo
<div class="container">
<div class="box">
<img src="https://picsum.photos/200/300/?random" alt="">
</div>
</div>
.container {
position: relative;
width: 100%;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}

It's possible to center an element that has aspect-ratio:1 with position absolute by using calc()
In the following example I'm using a circle because it's easier to explain and understand, but the same concept can be applied to any shape with aspect-ratio:1 meaning that the width and height are equal. (about aspect-ratio)
:root{
--diameter: 80px;
}
div{
position:absolute;
top: calc(50% - var(--diameter)/2);
right:calc(50% - var(--diameter)/2);
aspect-ratio:1;
width:var(--diameter);
border-radius:100%;
background:blue;
}
<div/>
Explanation

As far as I know, this is impossible to achieve for an unknown width.
You could - if that works in your scenario - absolutely position an invisible element with 100% width and height, and have the element centered in there using margin: auto and possibly vertical-align. Otherwise, you'll need JavaScript to do that.

I'd like to add on to bobince's answer:
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
Improved: /// This makes the horizontal scrollbar not appear with large elements in the centered div.
<body>
<div style="width:100%; position: absolute; overflow:hidden;">
<div style="position:fixed; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</div>
</body>

Just wrap your content with a new div and use display flex and then use align-items: center; and justify-content: center; take a look...
<div class="firstPageContainer">
<div class="firstPageContainer__center"></div>
</div>
.firstPageContainer{
display: flex;
width: 1000px;
height: 1000px;
justify-content: center;
align-items: center;
background-color: #FF8527;
}
.firstPageContainer__center{
position:absolute;
width: 50px;
height: 50px;
background-color: #3A4147;
}

Sass/Compass version of a previous responsive solution:
#content {
position: absolute;
left: 50%;
top: 50%;
#include vendor(transform, translate(-50%, -50%));
}

This worked for me:
<div class="container><p>My text</p></div>
.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

My preferred centering method:
position: absolute;
margin: auto;
width: x%
absolute block element positioning
margin auto
same left/right, top/bottom
A JSFiddle is here.

Here's a useful jQuery plugin to do this. I found it here. I don't think it's possible purely with CSS.
/**
* #author: Suissa
* #name: Absolute Center
* #date: 2007-10-09
*/
jQuery.fn.center = function() {
return this.each(function(){
var el = $(this);
var h = el.height();
var w = el.width();
var w_box = $(window).width();
var h_box = $(window).height();
var w_total = (w_box - w)/2; //400
var h_total = (h_box - h)/2;
var css = {"position": 'absolute', "left": w_total + "px", "top":
h_total + "px"};
el.css(css)
});
};

#container
{
position: relative;
width: 100%;
float: left
}
#container .item
{
width: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
}

HTML:
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
I know I already provided an answer, and my previous answer, along with others given, work just fine. But I have used this in the past and it works better on certain browsers and in certain situations. So I thought I'd give this answer as well. I did not "Edit" my previous answer and add it because I feel this is an entirely separate answer and the two I have provided are not related.

The accepted solution of this question didn't work for my case...
I'm doing a caption for some images and I solved it using this:
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
figure {
position: relative;
width: 325px;
display: block
}
figcaption{
position: absolute;
background: #FFF;
width: 120px;
padding: 20px;
-webkit-box-shadow: 0 0 30px grey;
box-shadow: 0 0 30px grey;
border-radius: 3px;
display: block;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
<figure>
<img src="https://picsum.photos/325/600">
<figcaption>
But as much
</figcaption>
</figure>

HTML
<div id='parent'>
<div id='centered-child'></div>
</div>
CSS
#parent {
position: relative;
}
#centered-child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
http://jsfiddle.net/f51rptfy/

This solution works if the element has width and height
.wrapper {
width: 300px;
height: 200px;
background-color: tomato;
position: relative;
}
.content {
width: 100px;
height: 100px;
background-color: deepskyblue;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
<div class="wrapper">
<div class="content"></div>
</div>

.center {
position: absolute
left: 50%;
bottom: 5px;
}
.center:before {
content: '';
display: inline-block;
margin-left: -50%;
}

This is a trick I figured out for getting a DIV to float exactly in the center of a page. It is really ugly of course, but it works in all browsers.
Dots and Dashes
<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
<table style="position:fixed;" width="100%" height="100%">
<tr>
<td style="width:50%"></td>
<td style="text-align:center">
<div style="width:200;border: 5 dashed green;padding:10">
Perfectly Centered Content
</div>
</td>
<td style="width:50%"></td>
</tr>
</table>
</div>
Cleaner
Wow, those five years just flew by, didn't they?
<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
<tr>
<td style="width:50%"></td>
<td style="text-align:center">
<div style="padding:10px">
<img src="Happy.PM.png">
<h2>Stays in the Middle</h2>
</div>
</td>
<td style="width:50%"></td>
</tr>
</table>
</div>

HTML:
<div class="wrapper">
<div class="inner">
content
</div>
</div>
CSS:
.wrapper {
position: relative;
width: 200px;
height: 200px;
background: #ddd;
}
.inner {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
width: 100px;
height: 100px;
background: #ccc;
}
This and more examples here.

equal height using % unit and relative to image height

Here is my fiddle:
JSFiddle
You can find the sources here in a JSFiddle.
CSS
.container {
width: 100%;
height: 350px;
float: right;
}
.box {
margin-top: -350px;
float: right;
width: 100%;
}
.box:first-child {
margin-top: 0;
}
img {
width: 50%;
height: 350px;
float:right;
}
.top-section {
width: 50%;
background-color: red;
height: 175px;
}
.bottom-section {
width: 50%;
background-color: blue;
height: 175px;
}
HTML
<div class="container">
<div class="box">
<img src="http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg">
<div class="top-section">
some text.......
</div>
<div class="bottom-section">
some other text.....
</div>
</div>
<div class="box">
<img src="http://i.ebayimg.com/00/s/MzAwWDMwMA==/z/JLYAAOSwxH1UBi1~/$_35.JPG?set_id=2">
<div class="top-section">
some text.......
</div>
<div class="bottom-section">
some other text.....
</div>
</div>
</div>
I have two divs stacked on top of each other (div.box) using margin-top. each div.box is divided into 3 section: a section for a picture, one for some text and another for some other text.
I'm trying to make div.top-section and div.bottom-section the same height and my problem is this:
I want my pictures to be responsive using width:100%;height:auto but I want at the same time, whenever a user resize the window, div.top-section and div.bottom-section don't loose their height relevant to the picture. I mean I want div.top-section and div.bottom-section, each have 1/2 image height and using % unit and not pixel.
How can I achieve this? Thanks in advance.

You can do this with absolute positioning. You can position the container your holding this all in to relative and then posiiton all of your inner content to absolute. Then give your container a padding-bottom of a percentage and play with this percentage until you get your desired height. Then give your text section absolute positioning and a height of 50% and your image a height of 100% and width of 50% and position this to the right.
This can be acheived one of 2 ways. You can use just the image and position that absolutely like so:
html:
<div class="container">
<div class="text-1">
Text 1
</div>
<div class="text-2">
Text 2
</div>
<img src="http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg"/>
</div>
Css:
.container{
position: relative;
padding-bottom: 60%;
}
.text-1{
position: absolute;
left: 0;
top: 0;
height: 50%;
width: 50%;
background: red;
}
.text-2{
position: absolute;
left: 0;
top: 50%;
height: 50%;
width: 50%;
background: blue;
}
.container img{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
}
Here is a working fiddle of that method Fiddle
Next if you don't want to lose the aspect ratio of the image. Say you have a tall image and a short image and you want to use this multiple times on your page. You can put another div in the container and position this to the right and place your image as the background of this div like so:
Html:
<div class="container">
<div class="text-1">
Text 1
</div>
<div class="text-2">
Text 2
</div>
<div class="image-section" style="background:url('http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg')"></div>
</div>
Css:
.container{
position: relative;
padding-bottom: 60%;
}
.text-1{
position: absolute;
left: 0;
top: 0;
height: 50%;
width: 50%;
background: red;
}
.text-2{
position: absolute;
left: 0;
top: 50%;
height: 50%;
width: 50%;
background: blue;
}
.image-section{
position: absolute;
right: 0;
top: 0;
background-size:cover !Important;
background-position:center !Important;
backgroung-repeat:no-repeat !Important;
height: 100%;
width: 50%;
}
Here is a working fiddle of that Fiddle

Fixed position div relative to centered content div?

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:
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>
Content 01<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%;
}

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>
Content 01
<br/>
</div>
</div>
<div id="content">
some text
</div>

all you need to do is change the width of the content div
#content{
height: 1000px;
width: 30%;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}