I want to insert an image in a placeholder and make it appear on the right. The background of the placeholder is white, the image is also white but I want to add a gray background so it could be visible. Like this:
I thought to add the image as a button but it could't appear just like that. Any suggestions?
You can follow this method for icon background, else use image instead of <i class="fa fa-search"></i> which is a Font Awesome icon.
.form-group {
position: relative;
}
input {
width: 100%;
height: 50px;
border: 1px solid #666;
padding-right: 70px;
box-sizing: border-box;
}
.icon {
position: absolute;
font-size: 36px;
top: 0px;
height: 100%;
right: 0px;
line-height: 50px;
background: #666;
text-align: center;
width: 70px;
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="form-group">
<input type="text" />
<span class="icon">
<i class="fa fa-search"></i>
</span>
</div>
</body>
Maybe you can consider using a label using fontawesome to display the image.
label {
display: inline-block;
margin: 0;
padding: .1em .3em;
background: darkgray;
color: white;
cursor: pointer;
}
label:after {
content: "\f002";
font-family: FontAwesome;
}
.container {
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<input type="text" placeholder="search...">
<label></label>
</div>
You can achive this with absolute and relative positioning, and FontAwesome.
To use FA, include this:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
In the <head>. The HTML will be as follows:
<div class="data-path-container">
<input class="data-path" placeholder="From where to grab the data">
<div class="data-path-icon"><i class="fa fa-search"></i></div>
</div>
We'll give .data-path-container relative positioning, and width. For the example, the width will be: calc(30vw + 40px).
.data-path-container {
width: calc(30vw + 40px);
position: relative;
}
The input doesn't need much styling either; Just height, padding and border / border-radius to give it a nice curved edge.
.data-path-input {
height: 1.2em;
width: 30vw;
padding: 5px 30px 5px 5px;
border-radius: 5px;
border: 1px solid #DEDEDE;
}
The .data-path-icon will require quite a lot of CSS:
.data-path-icon {
/* background-color, color, height and width */
width: 30px;
height: 1.5em;
background-color: grey;
color: white;
/* positioning */
position: absolute;
right: 0;
top: 1px;
/* centering the search icon */
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
/* curved edge and hover effect */
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.data-path-container {
width: calc(30vw + 40px);
position: relative;
}
.data-path-input {
height: 1.2em;
width: 30vw;
padding: 5px 30px 5px 5px;
border-radius: 5px;
border: 1px solid #DEDEDE;
}
.data-path-icon {
width: 30px;
height: 1.5em;
background-color: grey;
position: absolute;
right: 0;
top: 1px;
color: white;
display: flex;
border-radius: 0 5px 5px 0;
flex-direction: column;
justify-content: center;
text-align: center;
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="data-path-container">
<input class="data-path-input" placeholder="From where to grab the data">
<div class="data-path-icon"><i class="fa fa-search"></i></div>
</div>
Add a background to your button style
background: #ccc url('path/to/your/image') no-repeat center center;
Related
I am trying to code this:
But I struggle with how to deal with different colors in borders and stuff.
So far, I have in my html code:
.buttonfilter {
color: #0065FC;
background-color: #DEEBFF;
height: 20px;
width: 20px;
padding: 5px;
text-align: center;
border-radius: 50%;
}
<div class="buttonfilter"><i class="fas fa-dog"></i></div> Animaux autorisés
Rendering this:
Any idea how to keep the text aligned on line + keeping the light blue circle and adding the grey border ?
Here is an example to do this.
.wrapper {
display: flex;
align-items: center;
border: 1px solid #d9d9d9;
border-radius: 50px; /* circle width */
width: fit-content;
}
.circle {
border-radius: 50%;
background-color: #DEEBFF;
width: 50px;
height: 50px;
margin-left: -1px; /* border-width of wrapper */
display: flex;
align-items: center;
justify-content: center;
}
.label {
margin: 0 10px;
}
<div class="wrapper">
<div class="circle">
🐕
</div>
<div class="label">Animaux autorisés</div>
<div>
A combination of flexbox and negative margin does the job, along with tweaks to spacing.
.buttonfilter {
box-sizing: border-box; /* include padding in sizing for simplicity */
display: inline-flex; /* add flex properties to this element and children */
align-items: center; /* center children on the cross axis (vertically) */
height: 40px;
padding-right: 15px;
border-radius: 20px; /* half the height of the element */
border: 2px solid #e3e3e3;
font-family: Arial;
font-weight: bold;
}
.buttonfilter i {
color: #0065FC;
background-color: #DEEBFF;
width: 40px;
height: 40px;
margin-left: -2px; /* pull icon over left border */
border-radius: 50%;
margin-right: 10px; /* add space between icon and text */
display: flex; /* apply flex layout so we can position child pseudo-element */
align-items: center; /* center icon on cross axis (vertically) */
justify-content: center; /* center icon on main axis (horizontally) */
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="buttonfilter"><i class="fas fa-dog"></i> Animaux autorisés</div>
This may work for your purposes, to quickly change the color of the border.
.buttonfilter {
color: #0065FC;
background-color: #DEEBFF;
height: 20px;
width: 20px;
padding: 5px;
text-align: center;
border-radius: 50%;
outline: 5px single gray;
}
<div class="buttonfilter"><i class="fas fa-dog"></i></div> Animaux autorisés
I am trying to create a website. In which there is an animated search bar which I got from youtube. I am trying to use flexbox for my navbar and everything works except for the position of my search bar. The picture of my nav bar until now.
and this the code for my html and css some of it is cut out.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/20c0c25f7c.js" crossorigin="anonymous"></script>
<title>HTML Elements Reference</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<style>
body{
font-family: Helvetica, sans-serif;
background: black;
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
}
.search-box{
display:inline-block;
transform: translate(0%, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box > .search-btn {
background: black;
}
.search-btn{
color: #53e3f8;
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
}
.search-txt{
border: none;
background: none;
outline: none;
float: right;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
</style>
</head>
<body>
<nav class="container">
<div class="search-box">
<input class= "search-txt" type="test" name="" placeholder="Search...">
<a class="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</nav>
</body>
</html>
Can you help me out with the CSS and HTML and try not to use margin property for the search bar.
I would like the search bar to be fully centered in my flexbox.
As mdn says:
The translate() CSS function repositions an element in the horizontal
and/or vertical directions. Its result is a data
type.
So it is necessary just remove property transform: translate(0%, -50%); to place correctly your searchbar:
.search-box{
display:inline-block;
background: lightseagreen;
height: 40px;
border-radius: 40px;
padding: 10px;
}
An example:
body{
font-family: Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
}
.search-box{
display:inline-block;
background: lightseagreen;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box > .search-btn {
background: lightgreen;
}
.search-btn{
color: #53e3f8;
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
background: lightpink;
display: flex;
justify-content: center;
align-items: center;
}
.search-txt{
border: none;
background: none;
outline: none;
float: right;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<nav class="container">
<div class="search-box">
<input class="search-txt" type="test" name="" placeholder="Search...">
<a class="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</nav>
UPDATE:
When you use double percentage values transform: translate(0%, -50%); in translate function, then the second value is for the height of the reference box:
This value describes two or
values representing both the abscissa (x-coordinate) and
the ordinate (y-coordinate) of the translating vector. A percentage as
first value refers to the width, as second part to the height of the
reference box defined by the transform-box property.
I've been attempting to get multiple buttons to align vertically and horizontally next to each other in the center of the page. This is what I am aiming for: aligned buttons
However, I have only either gotten the images to center, but then they are not horizontally aligned. Or, I have gotten them to align horizontally, but they are not centered. Here is the code I am using on the buttons.
//used to remove the transition item so that the image changes. This is necessary to show image transition on load.
$(".hoverImage").removeClass("transitionHoverImage")
//sets welcome text opacity to 0 so it can be faded in
$('.welcomeText').css("opacity", 0);
//wait a second before attempting to fade text in. Second parameter of "fadeTo" sets opacity to 1 (100%)
$('.welcomeText').delay(1400).fadeTo(800, 1);
$('.portfolioBtn').css("opacity", 0);
$('.portfolioBtn').delay(1400).fadeTo(800, 1);
$('.resumeBtn').css("opacity", 0);
$('.resumeBtn').delay(1400).fadeTo(800, 1);
body {
font-family: Oswald, Baloo, Calibri, sans-serif;
background: black url(../images/background.jpg) no-repeat center;
height: 3600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.about {
display: block;
text-align: center;
background-color: #ffffff rgba(255, 255, 255, 0.5);
position: relative;
width: 904px;
padding: 33px 27px 34px;
z-index: 1;
}
.logo {
position: fixed;
left: .25em;
top: 3%;
height: 210px;
width: 150px;
z-index: 1;
}
/* you want to set up a transform, translate for this transform: translate (0, -100px); and */
.hoverImage {
position: relative;
z-index: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.transitionHoverImage {
transform: translate(0px, 200px);
}
.door {
transition: transform 1.5s ease-out;
}
.welcomeText {
position: relative;
top: 120px;
z-index: 1;
font-size: 7em;
color: white;
text-align: center;
}
.centerBtns {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -700px;
text-align: center;
width: 15%;
margin: 0 auto;
font-size: 2em;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
padding: 1.5em 2.8em;
z-index: 2;
}
.resumeBtn {
}
.portfolioBtn {}
/* why is this so finnicky?!?!?!?!?!?!?!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!???????????
/* dropdown menu code starts here */
/*this is the code for the revealed box and the dropshadow of box */
.dropdown-content {
display: none;
position: fixed;
right: 2em;
top:3%;
background-color:#343434;
min-width: 1em;
border-radius: 1em;
box-shadow: .25em 0em .5em #343434;
padding: 0em;
z-index: 1;
}
/* this is the highlight color when you hover over an item */
.dropdown-content a:hover {
background-color: dimgray;
}
/*w3 said I needed this code, so I put it in */
.dropdown:hover .dropdown-content{
display:block;
}
/*revealed dropdown style */
.dropdown-content a {
color: lightgray;
border-radius: 6px;
border-style: solid;
border-color: #343434;
background-color: #343434;
font-weight: bold;
text-align: center;
padding: .5em;
text-decoration: none;
display: block;
}
/*menu button for dropdown*/
.menu-button {
position: fixed;
right: 2em;
top:3%;
font-weight: bold;
font-size: 1em;
color: lightgray;
padding: 1em;
background-color: #343434;
border-color: #343434;
border-style: solid;
border-width: 2px;
border-radius: 6px;
z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- favicon links-->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<title>DenneyDesign</title>
<!-- CSS Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<ling href="css/animate.css" rel="stylesheet">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Baloo|Oswald" rel="stylesheet">
</head>
<body>
<!--Menu Bar-->
<div class="dropdown">
<button class="menu-button">MENU</button>
<div class="dropdown-content">
HOME
ABOUT
ARTWORK
RESUME
SOCIAL
</div>
</div>
<!--Logo-->
<div>
<img class ="logo" src="images/logo.png">
</div>
<!--Welcome Text-->
<div>
<header>
<h1 class='welcomeText'>WELCOME</h1>
</header>
<!--Hover Image-->
<img class="door hoverImage transitionHoverImage" src="images/door_slider.png">
</div>
<!--Buttons-->
<div>
<button class="centerBtns"><b>PORTFOLIO</b></button><button class="centerBtns resumeBtn"><b>RESUME</b></button>
</div>
<!--About-->
<div>
<header>
<h1><a name="about">ABOUT</a></h1>
</header>
</div>
</body>
<!--javascript-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</html>
Thanks for your help!
Flexbox does this easily. Use display: flex; justify-content: center; align-items: center; on the parent.
div {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
background: black;
}
<div>
<button>button</button>
<button>button</button>
</div>
Using flexbox is indeed the simplest solution, but just in case I re-arranged your CSS:
.centerBtns {
position: relative;
text-align: center;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
z-index: 2;
width: 40%;
font-size: 1.5em;
padding: 1.5em;
line-height: 3em;
}
<div>
<button class="centerBtns"><b>PORTFOLIO</button><button class="centerBtns resumeBtn">RESUME</b></button>
</div>
If you want both buttons to have the same width make sure the width % is large enough to contain the text. Or if not just remove the width property and tweak around with the last 3 properties to get the results you want.
There are some issues with the code you've provided, and I believe that may be making it difficult to isolate the problem.
A stripped down version of what you posted shows how this can be achieved with a combination of relative positioning and flexbox.
body {
height: 100vh;
background-size: auto auto;
background-color: red;
position: relative;
}
.nav {
border: solid 1px blue;
background: rgba(0,0,255,0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 750px;
display: flex;
align-items: center;
justify-content: center;
}
.nav__button {
font-size: 44px;
margin: 50px;
width: 250px;
padding: 30px 0;
}
<div class="nav">
<button class="nav__button">Portfolio</button>
<button class="nav__button">Resume</button>
</div>
Plunker mirror of the above here: http://plnkr.co/edit/LwJyRFFpSE9dj4KtCuw6
You can use FlexBox. If you have a few buttons, you can set the "justify-content" property as "center", and set a margin to each button. On the other hand, if you have many buttons, you can set the "justify-content" as "space-around", and remove the margin.
https://jsfiddle.net/pablodarde/nhxukt5c/
HTML
<div class='buttons'>
<button>
<b>PORTFOLIO</b>
</button>
<button>
<b>RESUME</b>
</button>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.buttons button {
display: inline-flex;
margin: 5px;
}
How can I add an image inside this search box? I'd like the image to be positioned inside and to the left of the palceholder text...
Here is the fiddle
HTML:
<div class="searchbar">
<h1>Welcome...</h1>
<div id="sb-search" class="sb-search">
<div class="search-wrapper">
<input class="search-input" placeholder="Search..." type="text" value="" name="search" id="search"/>
<img class="search-pic"src="img/search-icon.png"/>
</div>
</div>
</div>
thanks
Add this to your CSS which will position the image inside the input field.
.search-wrapper {
position: relative;
}
.search-wrapper img {
position: absolute;
top: 0px;
left: 0px;
}
Then you just need to use padding and change the top and left values to move everything about so it fits nicely and nothing is overlapped.
You might also need to set a width and height to the image so it's not too big for the input field.
You can solve it like this:
#mixin searchbar-font {}
#mixin searchbar-styles {
border: none;
outline: none;
color: $header-bg-color;
padding: 20px 65px 20px 20px;
background: transparent;
flex:1;
}
#mixin search-bar-input {
border: none;
outline: none;
}
.search-input {
border: none;
outline: none;
color: $header-bg-color;
padding: 20px 65px 20px 20px;
background: transparent;
flex:1;
}
.search-wrapper {
position: relative;
background: white;
display: flex;
align-items: center;
.search-input {
#include searchbar-font;
#include searchbar-styles;
}
.search-submit {
#include search-bar-input;
}
}
<div class="searchbar">
<h1>Welcome...</h1>
<div id="sb-search" class="sb-search">
<div class="search-wrapper">
<img class="search-pic" src="img/search-icon.png" />
<input class="search-input" placeholder="Search..." type="text" value="" name="search" id="search" />
</div>
</div>
</div>
Attached Fiddle
Technically you need to set your parent tag's position to relative, then set the image inside's position to absolute. Then you can overlay the image on your Input field. Also, one more thing to remember is you might want to set you z-index. Just in case, your image does not get behind of your input field. Make sure you are giving enough space to for your image by setting the input's padding left to somewhere around your image's width.
.search-wrapper{
.search-input{
padding-left: {image.width}px;
}
img{
position:absolute; left:0; top:0;
}
}
This should do the work.
<div class="search-container">
<input type="text" placeholder="Search...">
<img src="search-icon.png" alt="search icon">
</div>a
.search-container {
display: flex;
align-items: center;
position: relative;
}
input[type="text"] {
border: 1px solid gray;
border-radius: 20px;
padding: 10px 40px 10px 20px;
font-size: 16px;
width: 500px;
}
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 20px;
}
<div class="search-container">
<input type="text" placeholder="Search...">
<img src="search-icon.png" alt="search icon">
</div>
.search-container {
display: flex;
align-items: center;
position: relative;
}
input[type="text"] {
border: 1px solid gray;
border-radius: 20px;
padding: 10px 40px 10px 20px;
font-size: 16px;
width: 500px;
}
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 20px;
}
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>