Static box

Anyone know how you get a small box to appear on the right hand side of the website page and for it to always be exactly in the middle vertically, regardless of how big or small the page is?

How big is the box? Does it have a height? Here’s a starter.

Thanks for the quick response, I will go on the link. The box is 100px wide x 300px high.

Is it possible the content inside will grow? Text? If so we should try and do this without a height.

To do it with an auto height box is a little more complicated (but not much :smile: ).

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
    margin:0;
    padding:0;
    height:100%
}
.box {
    position:fixed;
    right:0;
    top:0%;
    bottom:0;
}
.box-table {
    height:100%;
    display:table;
}
.inner {
    display:table-cell;
    height:100%;
    vertical-align:middle
}
.content {
    background:lightblue;
    border:1px solid green;
}
</style>
</head>

<body>
<div class="box">
        <div class="box-table">
                <div class="inner">
                        <div class="content"> Auto height box<br>
                                test<br>
                                test<br>
                                test<br>
                                test</div>
                </div>
        </div>
</div>
</body>
</html>

No need for negative margins just use top:0 and bottom:0 and margin:auto.

e.g.

#box
{
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:lightblue;
    border:1px solid green;
    height:200px;
}

Saves a little bit of working out :wink:

1 Like

@PaulOB I had thought about that but I wasn’t sure how tall he wanted his element, or if hte height requirement was a fluid value. That’s why I said it was a starter :wink:

Brilliant, thank you very much. Problem all sorted. Great help on these forums as usual.

Just a thought - the code kindly given above by Paul determines how close to the right side of the screen the box is, but is there any way of coding it, so that it sets a certain space, (say 10px) from the content in the middle please?

Do you have an example you’re currently working with? Pauls code is pretty simplified and doesn’t have a content section.

Did you mean something like this?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
    margin:0;
    padding:0;
    height:100%
}
.page {
    max-width:980px;
    width:100%;
    margin:auto;
    display:table;
    height:100%;
    border:1px solid #000;
    background:red;
    position:relative;
    z-index:2;
}
.box {
    position:fixed;
    right:0;
    left:0;
    top:0%;
    bottom:0;
    width:1200px;/* 220px larger than layout */
    margin:auto;
}
@media screen and (max-width:1200px) {
    .box {width:100%}
    .page{margin:0 100px;width:auto}
}
.box-table {
    height:100%;
    display:table;
    width:100%;
}
.inner {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    text-align:right;
}
.content {
    background:lightblue;
    border:1px solid green;
    text-align:left;
    position:relative;
    z-index:3;
    width:100px;
    float:right;
}
/*.........*/
</style>
</head>

<body>
<div class="page">
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here <a href="#test">page content goes</a> here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
</div>
<div class="box">
        <div class="box-table">
                <div class="inner">
                        <div class="content"> Auto height box<br>
                                test<br>
                                test<br>
                                test<br>
                                test</div>
                </div>
        </div>
</div>
</body>
</html>

Paul, I just love the way you quickly reply with a useful response. Thank you. I will try this and let you know. Just two things, how can I adjust the spacing from the main content and the box on the right and what’s the below bit for please?
//

Presumably for the rest of your stylesheet.

As to moving hte box, on .box, just change the “right” value. A negative value to move it to the right, a positive value to move it left.

I should have explained in a bit more detail but I’ve been out all day and had 96 emails to look at :slight_smile:

There are a couple of things to consider and one is that you cannot fix position an element in relation to another element. Fixed positioned elements are always relative to the root element (html).

So to get the fixed positioned element hanging out to the side we create a fixed positioned layout that mimics the page layout.

e.g. The main page is say 980px wide and centred with auto margins then we create a fixed position element that is 980px wide and also centered. Now we have a fixed positioned element that will follow the original page exactly. However we now need to show a box to the side of the layout so we need to increase the size of our centred fixed positioned by double the width of the box. This now allows room at the right of the layout to show the fixed positioned element.

To move the box further away would simply mean increasing the width of that fixed positioned container element.

I used a media query because of a bug in IE10 with fixed position elements and max-width where it won’t center with margin:auto unless a width is used. The media query just kicks in and sets it to 100% so that we effectively get max-width.

I also set the margins at 100px on the main layout when the window reaches layout width so that you could see the fixed box at the side. Otherwise the box disappears under the layout in webkit because webkit doesn’t allow auto z-index on fixed positioned elements (which is contrary to the specs). You can’t raise the z-index of the fixed positioned element because then you couldn’t click anything in your layout.

Yes as Ryan said that’s just a css comment and I use it as a divider to divide sections. It means nothing really but was meant to imply that your normal code follows here.

Thanks to you both for the quick replies. It’s just that I’m trying to get the right side box, to always be 10px to the right of the main content, regardless of how large their screen was.

Pauls code seems to do that?

Yes that was what I was explaining.:slight_smile:

Your page content will have a width or max-width (otherwise there would be nothing to align to would there :smile: ). Just create the width of the fixed element to be the same size as that layout and then add on 2 x the width of the little box plus 2 x 20px (the gap that you wanted).

Here’s another variation.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
    margin:0;
    padding:0;
    height:100%
}
.page {
    max-width:980px;
    width:100%;
    margin:auto;
    display:table;
    height:100%;
    border:1px solid #000;
    background:red;
    position:relative;
    z-index:2;
}
.box {
    position:fixed;
    right:0;
    left:0;
    top:0%;
    bottom:0;
    width:980px;/* match layout width */
    margin:auto;
}
.box-table {
    height:100%;
    display:table;
    width:100%;
}
.inner {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    text-align:right;
}
.content {
    background:lightblue;
    border:1px solid green;
    text-align:left;
    position:relative;
    z-index:3;
    width:100px;
    float:right;
    margin-right:-120px;
}
 @media screen and (max-width:1240px) {
.box {
    width:100%
}
.page {
    margin:0 120px 0 0;
    width:auto;
    max-width:none
}
.content {
    margin-right:0;
}
}
/*.........*/
</style>
</head>

<body>
<div class="page">
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here <a href="#test">page content goes</a> here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
        <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
</div>
<div class="box">
        <div class="box-table">
                <div class="inner">
                        <div class="content"> Auto height box<br>
                                test<br>
                                test<br>
                                test<br>
                                test</div>
                </div>
        </div>
</div>
</body>
</html>

There will always be a 20px gap between the layout and the fixed box.

Brilliant and sorry I didn’t catch that the first time! Thanks Paul, you’re a gem!

Hi Paul, just trying to put the css in the external style sheet. Would it just go exactly as::
html, body {
margin:0;
padding:0;
height:100%
}
.page {
max-width:980px;
width:100%;
margin:auto;
display:table;
height:100%;
border:1px solid #000;
background:red;
position:relative;
z-index:2;
}
.box {
position:fixed;
right:0;
left:0;
top:0%;
bottom:0;
width:980px;/* match layout width /
margin:auto;
}
.box-table {
height:100%;
display:table;
width:100%;
}
.inner {
display:table-cell;
height:100%;
vertical-align:middle;
text-align:right;
}
.content {
background:lightblue;
border:1px solid green;
text-align:left;
position:relative;
z-index:3;
width:100px;
float:right;
margin-right:-120px;
}
@media screen and (max-width:1240px) {
.box {
width:100%
}
.page {
margin:0 120px 0 0;
width:auto;
max-width:none
}
.content {
margin-right:0;
}
}
/
…*/

Yes that looks right.

Are you having problems with it?

I was just worried about the beginning part:
html, body {
margin:0;
padding:0;
height:100%
}
Would it need a full stop at the beginning, like the other commands in the css do?

Also, the bit at the end:
//