when trying to add a <div> inside another it results in the main container to be pushed down and equal amount to the added <div>. I can fix the issue by setting the position of the added to absolute but I am trying to understand which attribute is causing this behavior.
https://imgur.com/t9Q0ocm
for example Adding the red <div> inside the purple <div> caused the purple <div> to be pushed down
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Blue</title>
</head>
<body>
<aside class="side-menu"></aside>
<main class="main-content">
<div class="c-content">
<div class="c-content-text">
</div>
</div>
<div class="r-content">
<div class="r-content-text">
</div>
</div>
<div class="video-container"></div>
</main>
</body>
</html>
CSS
html {
font-family: Roboto, san serif;
font-size: 16px;
font-weight: normal;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-size: 3.125rem;
line-height: 3.6875rem;
text-transform: uppercase;
color: #ffffff;
}
p {
font-size: 1rem;
font-family: Roboto;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
body {
background-color: #1458e4;
font-size: 0;
margin: 0;
padding: 0;
}
.side-menu {
width: 5%;
height: 100vh;
/* background-color: coral; */
position: sticky;
display: inline-block;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.main-content {
background-color: cyan;
display: inline-block;
width: 95%;
}
.c-content {
background-color: rgb(184, 11, 184);
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
width: 67%;
height: 100vh;
}
.r-content {
display: inline-block;
background-color: darkkhaki;
width: 33%;
height: 100vh;
padding: 25.4375rem 4.6875rem 19.1875rem 3.375rem;
}
.video-container {
background-color: lemonchiffon;
height: 68vh;
}
.c-content-text {
display: inline-block;
/* position: absolute; */
background-color: tomato;
width: 500px;
height: 500px;
}
.r-content-text {
background-color: turquoise;
width: 500px;
height: 500px;
}```
Remove display: inline-block in class c-content-text should also solved your issue.
I think this thread answer's your question Inline-block element height issue
AFAIK, the inline-block has relation with font-size and line-height, and you set the body to 0px, which makes lots of the issues hard to describe. E.g. Try to remove the font-size: 0px; from the body. And no matter you remove ('inline' or add absolute), the behavior is the same. Althought the page is still looks not good.
Last, i would suggest you to try the grid layout for your layout design, your scenario should be easy to implement with grid layout.
Related
I have been trying to set the .flex-container to cover entire page below the horizontal rule, but when I resize the window, in around 1200px width, the flex box container is not going all the way down. I am fine with the buttons coming as a column when viewing on a small screen, as already happening.
what I want to happen
body {
background-color: #06283D;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
.heading {
color: #1894E7;
display: flex;
justify-content: center;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 3.6em;
margin: 5%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
position: relative;
left: 0;
right: 0;
}
.flex-container>button {
background-color: #DFF6FF;
width: 350px;
margin: 6%;
text-align: center;
line-height: 75px;
font-size: 30px;
border-radius: 10px;
cursor: pointer;
border: none;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
transition-duration:0.3s;
}
.flex-container>button:hover {
transform: translateY(-5px);
transition-duration:0.3s;
box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
#media screen and (max-width: 1086px){
.flex-container>button{
margin: 7%;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Papers</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600&family=Roboto:wght#300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="public/css/styles.css">
</head>
<body>
<div class="heading">
<h1>Loren ipsum</h1>
</div>
<hr style="margin:0;position: relative;left:-15px;width:100%;height:0.5px;border-width:0;color:gray;background-color:black;opacity:0.5">
<div class="flex-container">
<button>1Year</button>
<button>2Year</button>
<button>3Year</button>
<button>4Year</button>
</div>
</body>
</html>
If you make the styling of the flex-container:
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
Then it will certainly cover the whole page.
I'm not sure I understand the point of using position: absolute, so if that's not requisite, you get rid of position:absolute and instead change it to height: 100vh, it'll stretch to be equal to the vertical height of the viewport. If 100vh is too tall, you can change it accordingly.
Another option would be to give the body a dynamic height like 100vh (which will force the entire page to be exactly the height of the viewport) and add overflow:hidden to the body. Note, in this scenario if any of the buttons wrap and force the parent div to be any larger, you won't be able to scroll to them.
A final option would be to wrap the whole thing in a wrapper div and then make that div display: flex; see here: https://jsfiddle.net/slingtruchoice/jc03nft2/
Position absolute can be really annoying to work with, in my humble opinion. I avoid it when possible, simply because it affects the way other elements (siblings in particular, ie divs that come after your .flex-container div) interact with it. The use cases for position: absolute would be if you're trying to overlay an object on top of another object, or move it to a non-standard position within a parent container. If you look at the jsfiddle link at the bottom, i've included an example of ways to use position:absolute at the top.
body {
background-color: #06283D;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
.heading {
color: #1894E7;
display: flex;
justify-content: center;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 3.6em;
margin: 5%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
height: 100vh; /* here's the change*/
}
.flex-container>button {
background-color: #DFF6FF;
width: 350px;
margin: 6%;
text-align: center;
line-height: 75px;
font-size: 30px;
border-radius: 10px;
cursor: pointer;
border: none;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
transition-duration: 0.3s;
}
.flex-container>button:hover {
transform: translateY(-5px);
transition-duration: 0.3s;
box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
#media screen and (max-width: 1086px) {
.flex-container>button {
margin: 7%;
}
}
<div class="heading">
<h1>Hello World!</h1>
</div>
<div class="flex-container">
<button>Click Me!</button>
<button>Click Me!</button>
<button>Click Me!</button>
<button>Click Me!</button>
</div>
https://jsfiddle.net/slingtruchoice/56e0sj4k/
I am trying to locate an SVG to have a look like this:
And I want to do it by having a ::before or ::after pseudo-elements. But I can't because the SVG is too big and its first location is far from the borders of the parent element.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>A modern <span>publishing platform</span> </h1>
<p>Grow your audience and build your online brand</p>
<div class="buttons">
<button class="btn ">Start for Free</button>
<button class="btn border ">Learn More</button>
</div>
</header>
</body>
</html>
*{
box-sizing: border-box;
}
html{
font-size: 10px;
}
body{
margin: 0;
padding: 0;
font-family: Poppins;
position: relative;
}
header{
width: 100%;
padding:2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
color: white;
border-bottom-left-radius: 12rem;
position: relative;
z-index: -1;
background-image: linear-gradient(to right,
hsl(13, 100%, 72%),
hsl(353, 100%, 62%));
h1{
margin-top: 10rem;
width: 100%;
font-size: 2.7rem;
span{
display:block;
}
}
p{
font-size: 1.7rem;
font-weight: 100;
}
.buttons{
display: flex;
align-items: center;
justify-content: flex-end;
.btn{
padding: 1rem 2rem;
background-color: white;
border-radius: 3rem;
border: none;
margin: 0px 1rem;
font-style: 400;
font-family: Poppins;
border: .1rem solid white;
}
.border{
background-color: transparent;
color: white;
}
margin-bottom: 10rem;
}
}
header::before{
content: url(images/bg-pattern-intro.svg);
position: absolute;
transform: scale(.1);
}
Can anyone tell me what to do? And why doesn’t the .svg locate itself close to the border of its parent in the first place?
You need to set a width and a height to your pseudo-element. As-is, it's basically an empty in-line element with no actual content to prop it open, so it appears to be invisible. If you inspect in chrome, you'll see at least one of its dimensions is 0.
In this case, I'd also make the pseudo-element display: block so it behaves more like a div.
It appears that when you set the svg image url as the content value then the default behavior is to fill the available container.
Here's a working example:
header::before {
content: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg);
width: 50px;
height: 50px;
position: absolute;
display: block;
}
<header></header>
Another option is to set the svg as a background-image. You'll probably also want to set a background-size value (in this case, contain) so that the background image scales based on its container instead of the svg file's inherent viewBox attribute.
header::before {
content: "";
background: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg) center center / contain no-repeat;
width: 50px;
height: 50px;
position: absolute;
display: block;
}
<header></header>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
So I'm trying to build a basic layout for my site and I've run into a problem. The problem is some margins that I can't figure out where they're coming from.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" href="/images/favicon.png" type="image/png">
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="main">
<p>main</p>
</div>
</div>
</body>
</html>
style.css:
/* set defaults */
html, body, div {
background-color: white; /* Was #eee or #ccc */
/*font-size: 16px;*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
color: white;
font-family: 'PT Serif', serif;
/*font-family: 'Noto Serif', serif;*/
box-sizing: border-box;
}
.wrapper {
width: 100%;
max-width: 1200px;
height: auto;
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
.main {
width: 80%;
height: 100px;
color: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: black;
display: inline-block;
}
.sidebar {
width: 20%;
height: 100px;
color: black;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: lightgrey;
display: inline-block;
}
p {
margin: 0;
padding: 0;
}
So when I render the page as shown I get:
But when I set the width on the sidebar to 19% I get:
As you can see I'm getting some margins to the right of both elements. I have no idea where this is coming from and the inspector is telling me I have no margins! Margin, padding, border and outline are all set to zero so I have no idea where this is coming from. Is there something I'm missing?
Edit: I should have said I'm trying to get the elements to display next to each other without wrapping.
Reason for this beacuse inline elements respect the word spacing between divs in the html. The space between first and second create an actual gap that you can see on the page.
You can easily remove this by removing the space between inline divs in the html.
div {
display: inline-block;
width: 50%;
}
<div style="background: green">Width: 50%</div><div style="background: red">Width: 50%</div>
But I hope this is not you are expecting, do not worry there are some otherways as well :)
font-size: 0;
gap between the two divs is due to word spacing therefore adding font-size: 0 to the parent container will remove the gap between the two divs.
.wrapper {
width: 100%;
font-size: 0
}
div {
display: inline-block;
width: 50%;
}
<div class='wrapper'>
<div style="background: green; font-size: 14px" class="sidebar">Width 50%</div>
<div style="background: red; font-size: 14px" class="main">Width 50% </div>
</div>
display: flex this method only suppport IE > 10 versions, you can apply display: flex to the parent container and apply relavent widths accordingly to child divs.
.wrapper {
display: flex;
}
.main {
width: 80%
}
.sidebar {
width: 20%
}
<div class='wrapper'>
<div style="background: green" class="sidebar">Width 20%</div>
<div style="background: red" class="main">Width 80% </div>
</div>
Actually here you are not getting the margin issue when you have two elements that has width:19% and width:80%, the remaining width:1% gets the gap that you mentioned as margin.
Simply set float:left; to both sidebar and main classes that avoid the margin issue. No need to change the width.
html,
body,
div {
background-color: white;
/* Was #eee or #ccc */
/*font-size: 16px;*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
color: white;
font-family: 'PT Serif', serif;
/*font-family: 'Noto Serif', serif;*/
box-sizing: border-box;
}
.wrapper {
width: 100%;
max-width: 1200px;
height: auto;
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
.main {
width: 80%;
height: 100px;
color: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: black;
display: inline-block;
float: left;
}
.sidebar {
width: 20%;
height: 100px;
color: black;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: lightgrey;
display: inline-block;
float: left;
}
p {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" href="/images/favicon.png" type="image/png">
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="main">
<p>main</p>
</div>
</div>
</body>
</html>
You have forgot to add the float. Please add the following css to your css so that it wont take margin
.sidebar, .main{ float:left; }
if you usnig float:left instead of display: inline-block; your margin will remove
I'm trying to center a headline for a webinar signup page.
Here is what it's doing:
It's sliding off the left side...
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Sat, 21 Nov 2015 22:11:09 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text.css" href="style.css">
<title>Event Lander</title>
</head>
<body>
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
</body>
</html>
And here is my CSS:
*{
margin:0px;
}
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
line-height: 1.2;
text-align: center;
position: absolute;
left: -55.656px;
top: 39.867px;
width: 682px;
height: 48px;
z-index: 4;
align:center;
display:inline;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
height: 143px;
margin: 0px;
width: 100%;
text-align: center;
}
I've tried adding the inline markup to the html as well as adding different text-aligns multiple times to both css classes.
I want it to fill the width of the browser, no margin, and with the white text in the center of the page with the classes defined.
Can anyone help? Thanks!
HTML
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
CSS
* {
margin:0px;
}
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
text-align: center;
line-height: 143px;
}
This center aligns your whiteheadline horizontally and vertically
Live Demo
Let me know if there is anything else I can do. If this doesn't work for you, I will revise it :)
* {
margin: 0px;
}
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
width:100%;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
margin: 0px;
width: 100%;
text-align: center;
width:100%;
padding-top:20px;
padding-bottom:20px;
}
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
<link rel="stylesheet" type="text.css" href="style.css">
Use type="text/css" not type="text.css" or delete it all together because it's no longer needed.
The changes are annotated on the CSS. Basically you need to put your absolute positioned title inside a relative positioned header. That way when you apply left, right, bottom, and/or top positions, it'll be in relation to your header and not the whole page.
DEMO
CSS
html, body {
box-sizing: border-box;
font: 400 16px/1.5'Open Sans';
/* 100% of viewport width and height */
height: 100vh;
width: 100vw;
}
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
.wrap {
width: 100%;
height: auto;
margin: auto;
}
.whiteheadline {
font-size: 3em;
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
position: absolute;
/* 50% of container (i.e. header) then subtract 50% of your title width (580px/2) */
left: calc(50% - 290px);
top: 39.867px;
width: 580px;
height: 48px;
z-index: 4;
/*align:center;<<<Not HTML5*/
/*display:inline;*/
}
.header-rectangle {
background-color: rgb(104, 115, 251);
height: 143px;
margin: 0px;
width: 100%;
text-align: center;
/* If using position: absolute, make the container (i.e. header) position: relative */
position: relative;
}
HTML
<div class="wrap">
<header class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</header>
</div>
tl;dr - How can I center the blue div found in the third image in the white space, not the page?
I've been experiencing quite the headache recently. I've created a website with two distinct columns, but, is achieved with only one div element. This can be seen below.
It's pretty obvious from the picture that the first column is to be regarded as a sidebar, and hence, has the class .sidebar. .sidebar has a fixed width property of 400px. The rest of the page is simply the rest of the div with the class .container, which extends to 100% on both its width and height
properties. As I would image this is hard to image from just reading this text, I've found a way to illustrate how the page is setup.
Gray is the html element.
White is the body element.
The aqua on white is the div with the class .container.
The following aqua is the div with the class .sidebar.
Let's now insert the div that's giving me issues.
As you can see, a single blue div has been added. This has the class .test, and which simply sets the width, height, and margin properties. As you can now see, when the margin is set to 0 auto, the div is centered to the window and not the white space. Obviously this is the expected action.
The issue I'm facing is that I have no idea how I can center the blue div in the white space. I'm not sure how I would create anything the exact width of the white space, and hence, don't know how margin: 0 auto would be any use. How would I center my test element in the white space? Can this be achieved through CSS and HTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Raleway' rel='stylesheet' type='text/css'>
<link href="https://www.codekaufman.com/assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="https://www.codekaufman.com/assets/css/alerts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banner-alert">Please excuse the mess. I'm currently working to improve the site. Thanks.
</div>
<div class="container">
<div class="side-bar">
<div class="temp-logo"></div>
<ul class="nav">
<li class="nav-button-disabled">About</li>
<li class="nav-button-disabled">GitHub</li>
<li class="nav-button-disabled">Contact</li>
</ul>
<div class="emphasis-button-disabled">Support</div>
<div class="legal">Copyright © 2015 Jeffrey Kaufman. All Rights Reserved.</div>
</div>
<div class="test"></div>
</div>
</body>
</html>
#charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
color: #000;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.container {
height: 100%;
}
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: #EEE;
}
.temp-logo {
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
background: #000;
}
.nav {
width: 200px;
margin: 0 auto;
margin-top: 75px;
list-style-type: none;
}
.nav-button {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: pointer;
transition: 0.5s;
}
.nav-button:hover {
margin-left: 20px;
}
.nav-button-disabled {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: default;
color: #AAA;
}
.nav-category {
margin-top: 40px;
margin-bottom: 20px;
font-size: 2em;
cursor: default;
border-bottom: 1px #000 solid;
}
.emphasis-button {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
color: #C30;
transition: 0.4s;
cursor: pointer;
}
.emphasis-button-enabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
transition: 0.4s;
cursor: pointer;
color: #EEE;
background: #C30;
}
.emphasis-button-disabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
line-height: 45px;
left: 138px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #AAA;
color: #AAA;
cursor: default;
}
.emphasis-button:hover {
color: #EEE;
background: #C30;
}
.legal {
font-family: 'Open Sans', sans-serif;
position: absolute;
font-size: 0.85em;
text-align: center;
width: 400px;
height: 20px;
left: 0;
bottom: 20px;
}
.test {
width: 600px;
height: 200%;
background: blue;
margin: 0 auto;
}
Wrap it in another element with position=absolute, a right, top and bottom value of 0 and a left value of 400px:
<div style="position:absolute;right:0;top:0;bottom:0;left:400px;">
<div class="test"></div>
</div>
Your side bar already have position fixed, so please add padding left to your container it will work
.container {
height: 100%;
padding-left: 400px; /*width of your .sidebar*/
}
try changing the width for a percentage and adding a new div that covers the rest of the white space so you can center the blue element on that new div.
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 20%;
height: 100%;
background: #EEE;
}
.new-div{width:80%;float:left;}
Set the test inside the new div
<div class="new-div"><div class="test"></div></div>