CSS floating and positioning

StackOverflow https://stackoverflow.com/questions/21426274

  •  04-10-2022
  •  | 
  •  

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:

Was it helpful?

Solution

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

OTHER TIPS

<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/

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

}

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

}

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top