CSS floating and positioning

Question

I have 2 boxes that should show up next to eachother. I want one to have a vertical fixed position. So when I scroll up or down the box stays at the same height.

But I don't want it to be horizontal fixed, because I want the 2 boxes together always in the center. Even when you make your browser bigger or smaller. For this I use the margin: 20px auto;

Is there any way how I can keep the margin and get 2 boxes where 1 of them has a vertical fixed position.

Just like this website when making a post. There is a the main page with the question and a sidebox with similar question that always stays on the screeen.

My code so far:

<!DOCTYPE html>
<html>

<head>
    <link rel="icon" type="image/png" href="/favicon.ico">
    <style>
        html,
        body {
            background-color: #026642;
        }
        #container {
            width: 800px;
            margin: 20px auto;
            position: relative;
        }
        #sidebox {
            background-color: white;
            padding: 5px;
            margin: 5px;
            border-radius: 5px;
            width: 180px;
            position: absolute;
        }
        #indexcontainer {
            padding: 10px;
            background-color: #FFD302;
            border-radius: 20px;
            width: 580px;
            position: absolute;
        }
        #header {
            text-align: center;
        }
        #content {
            background-color: white;
            padding: 5px;
            margin: 5px;
            border-radius: 5px;
        }
        #content i {
            font-size: 14px;
        }
        #footer {
            clear: both;
            padding: 0 5px;
            font-size: 11px;
            clear: both;
        }
        a:link {
            text-decoration: none;
            color: black;
        }
        a:visited {
            text-decoration: none;
            color: black;
        }
        a:hover {
            text-decoration: underline;
            color: black;
        }
        a:active {
            text-decoration: underline;
            color: black;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="sidebox">
            Sidebox
        </div>
        <div id="indexcontainer">
            <div id="header">
                <img src="images/emte.jpg" alt="logo" width="200" height="100">
                </a>
            </div>
            <div id='content'>
                Main text box
            </div>
            <div id="footer"></div>
        </div>
    </div>
</body>

</html>

How it needs to work:

Muhammad Essa · Answer 1 · 2014-01-29T09:13:25.330

0

<html>
<head>
<script type="text/css">
#sidebox{
 margin:left;
 position:fixed;
}
</script>
</head>
<body>

<div id="sidebox">
    Sidebox
</div>
<p>
other data to display......
</p>
</body>

Hope this will helps

also you can see this JsFiddle link http://jsfiddle.net/Dn3UH/

edited Jan 29 '14 at 09:13

answered Jan 29 '14 at 09:07

Muhammad Essa

142
1
10

this does not seem to work for me. The sidebox is fixed and always stays on the same position when I scroll up and down, and the margin: auto also still works. But the box is inside the indexcontainer. When I do left (or right) I can fix that but then the box's always stays left or right and then you can't resize the browser, else the boxes wil collapse eachother. The website is: http://h5frank.gomarjd1.one.axc.nl/winkel.php – Frank Jan 29 '14 at 09:33
It's still not what I want, sorry! I want the sidebox And the indexcontainer to be 1, and then center it in the middle through margin auto. Like it is right now. But when you go use positioning it all doesn't work any more. Maybe there is just no solution to this? – Frank Jan 29 '14 at 16:19
kindly update your question with any image that show the working scenario that you wanted to get... it will make me easy to solve your problem... thanks. – Muhammad Essa Jan 30 '14 at 05:14

score 0 · Answer 2 · answered Jan 29 '14 at 09:18

0

#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 40%;
position: relative;
margin: 0 auto;

}

#container {
width: 100%;
margin: 20px auto;
position: relative;

}

answered Jan 29 '14 at 09:18

user3246488

1

score 0 · Accepted Answer · answered Feb 01 '14 at 16:30

use this CSS...

    body {
        background-color: #026642;

    }
    #container {
        width: 100%;


   }
   #container #indexcontainer{

   margin-left:23%;
   width:30%;


  }
  #container #indexcontainer #header #sidebox {
        background-color: white;
        color:red;
        padding: 5px;
        margin-left:31%;
        border-radius: 5px;
        width: 20%;
        position: fixed;
  }
  #indexcontainer {
        padding: 10px;
        background-color: #FFD302;
        border-radius: 20px;
        width: 580px;
        position:relative;

    }
    #header {
        text-align: center;
    }
    #content {
        background-color: white;
        padding: 5px;
        margin: 5px;
        border-radius: 5px;
    }
    #content i {

        font-size: 14px;
    }
    #footer {
        clear: both;
        padding: 0 5px;
        font-size: 11px;
        clear: both;
    }
    a:link {
        text-decoration: none;
        color: black;
    }
    a:visited {
        text-decoration: none;
        color: black;
    }
    a:hover {
        text-decoration: underline;
        color: black;
    }
    a:active {
        text-decoration: underline;
        color: black;
    }

for further look at this jsfiddle link http://jsfiddle.net/NJMK6/4/

Hope this help you... thanks

You use a width in px and in %. Don't really get that. On the jsfiddle it works just like I want but the width is now a % and I want it to be always the same. Can't really make out where to change the % to px because sometimes you use the div's multiple times, like #indexcontainer. — Frank, Feb 02 '14 at 20:24
Ok then you just need to put px according to your div position.... take a look at this http://jsfiddle.net/NJMK6/5/ — Muhammad Essa, Feb 03 '14 at 05:01
I will try, but there is one thing that bothers me. First you say #container{width: 100%} and later on you set it to 30%? Aftert that you eve nset it to 20%? Or I don't understand CSS or your coding, sorry. — Frank, Feb 03 '14 at 11:47

CSS floating and positioning

3 Answers3