I don't know how to center a full screen div.
I want to center a div with width: 90% and height: 90%, but when I use this code:
html,
body {
width: 100%;
height: 100%;
}
.outer {
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.inner {
height: 90%;
width: 90%;
position: relative;
top: 5%;
background: red;
margin: 0 auto;
}
<div class="outer">
<div class="inner">
</div>
</div>
I get a little bit of scroll that I don't want.
Use this:
html,body {
margin: 0;
//other codes...
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.outer {
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.inner {
height: 90%;
width: 90%;
position: relative;
top: 5%;
background: red;
margin: 0 auto;
}
<div class="outer">
<div class="inner">
</div>
</div>
Related
What is the best way to align a fixed div within a relative div to the right, while still keeping an inherited max-width?
Update (Jan 24, 2018): I've answered this question with the solution. See here.
See the following snippet for further reference:
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
background: blue;
float: right;
color: white;
text-align: center;
right: 0;
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
A fixed element's position is always relative to the viewport/window, never to any other element.
The only thing you can do (with CSS) is to use right: calc(50% - 250px); for its position to have it right aligned to the right border of the 500px wide centered "parent" element, but that will only work if the screen is wider or equal to the max-width of the "parent" element.
Addition after comments: Plus add a media query for screens below 500px width with right: 0 (thanks to #MrLister for that)
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media (max-width: 500px) {
.box {
right: 0px;
}
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
What if you did this:
Css
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media screen and (max-width: 500px) {
.box {
right: 0;
}
}
#media screen and (min-width: 501px) {
.box {
width: 100px; /* 100px is 20% of the max-width */
}
}
Html
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
Figured something out. It can be done after all!
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}
.max-width {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: lightgrey;
position: relative;
}
.box1 {
position: relative;
width: 20%;
height: 100px;
background-color: yellow;
text-align: center;
}
.container {
position: absolute;
width: 60%;
background-color: purple;
height: 100%;
margin: 0 auto;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.wrap-box {
position: fixed;
max-width: 500px;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.wrap-box > div.box2 {
width: 20%;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
right: 0;
text-align: center;
}
.wrap-box > div.box3 {
width: 20%;
height: 100px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
text-align: center;
}
<div class="max-width">
<div class="box1">position: relative, width: 20%</div>
<div class="container">
position: absolute, width: 60%
<div class="wrap-box">
<div class="box2">position: fixed (top), width: 20%</div>
<div class="box3">position: fixed (bottom), width: 20%</div>
</div>
</div>
</div>
Newbie question here. Trying to learn the basics. I have a simple page with a header a footer and a container. In that container I want an image, and I want it centered. Using margin: 0 auto is not doing it. I have tried explicitly giving the container a width, still no good. Thanks.
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: absolute;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
margin: 0 auto;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
jsfiddle
remove position: absolute; and add width to imagewrap class .like width: 300px;
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
width: 300px;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
margin: 0 auto;
}
<div id="header">
</div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer">
</div>
You can add text-align: center; instead of margin: 0 auto; to imagewrap
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
display: block;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: absolute;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
width: 100%;
text-align: center;
}
<div id="header">
</div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer">
</div>
Try background image for that container and position it center.
Please change background url as per your requirement
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
background-image: url(http://clockworkmoggy.com/wp-content/uploads/image00.png);
background-repeat: no-repeat;
background-position: center;
}
#imagewrap{
position: absolute;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
margin: 0 auto;
}
<div id="header">
</div>
<div id="container">
<div id="imagewrap">
</div>
</div>
<div id="footer">
</div>
Just remove margin:0 auto; and replace text-align: center; in #imagewrap. It will work!!
Check the below JSFiddle code for reference.
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
text-align: center;
}
<body>
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/29708" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
</body>
JSFiddle Demo
I am trying to make a content slider with a chatbox to the side and a footer stuck to the bottom.
Here is a diagram of what I am trying to achieve:
The problem with below code is that the chatbox is the height of the page. I want the chat box to stop at the footer so that it is the height of the page -60px.
And here is what I have so far:
body {
margin: 0;
}
.wrapper {
background: #95a5a6;
display: table;
height: 100vh;
width: 100%;
}
.wrapper-inner {
display: table-cell;
padding-left: 300px;
padding-bottom: 60px;
vertical-align: middle;
text-align: center;
}
.chatbox {
background: #bdc3c7;
min-height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
width: 300px;
z-index: 2;
}
.footer {
background: #2c3e50;
bottom: 0px;
height: 60px;
position: absolute;
width: 100%;
z-index: 1;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner">Content</div>
</div>
<div class="footer"></div>
https://jsfiddle.net/bjxsyve7/4/
Here's a simplified version using only flex and calc():
body {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.chatbox {
flex: 0 0 300px;
height: calc(100vh - 60px);
overflow-y: auto;
background-color: #bdc3c7;
}
.content {
flex: 1;
background-color: #95a5a6;
}
.footer {
flex-basis: 100%;
height: 60px;
background: #2c3e50;
}
<div class="chatbox"></div>
<div class="content">Content</div>
<div class="footer"></div>
jsFiddle
You can use CSS calc() to achieve this. Add this min-height: calc(100% - 60px) to .chatbox. For more info about calc().
body {
margin: 0;
overflow-x:hidden;
}
.wrapper {
background: #95a5a6;
display: table;
height: 100vh;
width: 100%;
}
.wrapper-inner {
display: table-cell;
min-height: 100%;
padding-left:300px;
padding-bottom: 60px;
}
.chatbox {
background: #bdc3c7;
min-height: calc(100% - 60px);
position: absolute;
overflow-x: hidden;
overflow-y: auto;
top:0;
width: 300px;
z-index: 2;
}
.footer {
background: #2c3e50;
bottom: 0px;
height: 60px;
position: absolute;
width: 100%;
z-index: 1;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner"></div>
</div>
<div class="footer"></div>
You need only adding this:
.wrapper{
position: relative;
}
In your code the chatbox div has height 100% of the body. But if you set position: relative; to it's parent(.wrapper) it will have height 100% of it's parent.
This is an easy way to do this with flex:
body {
display: flex;
flex-direction:column;
min-height: 100vh;
}
.wrapper {
background: #95a5a6;
display: flex;
flex: 1;
}
.chatbox {
background: #bdc3c7;
overflow-x: hidden;
overflow-y: auto;
width: 200px;
}
.footer {
background: #2c3e50;
height: 60px;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner">Content</div>
</div>
<div class="footer"></div>
I am attempting to build a header across the top-center of the page with two names and a ring in between centered. I also have a picture centered in the middle of the page. Everything looks nice on a full screen laptop until I resize
the browser and everything moves and looks jumbled. I've read a lot of
post and everyone says use a wrapper with a min width and user percentages along with that in your divs. I can't figure this out after a week of reading any
and everything I possibly could.
HTML:
<body>
<div class="wrapper">
<div class="michael">
<p class="m">Michael</p>
<div>
<div class="ringhead">
<img src="Images/gold.gif" class="ring" alt="Wedding Ring" width="100" height="60">
</div>
<div class="christina">
<p class="c">Christina</p>
</div>
<div class="weddingWebsite">
<img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website;">
</div>
</body>
</html>
CSS:
.wrapper {
min-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.michael{
color:#EEE8AA;
position: fixed;
text-transform: uppercase;
font-size: 30px;
max-width: 100%;
max-height: 100%;
left: 30%;
top: 0%;
}
.m{
max-width: 100%;
max-height 100%;
}
.ringhead{
position: fixed;
max-width: 100%;
max-height: 100%;
left: 50%;
top: 4%;
}
.ring{
max-width: 100%;
max-height: 100%;
}
.christina{
color:#EEE8AA;
position: fixed;
left: 70%;
top: 0%;
text-transform: uppercase;
font-size: 30px;
max-width:100%;
max-height: 100%;
}
.c{
max-width: 100%;
max-height: 100%;
}
body{
background-image: url("Images/Top Banner.jpg"), url("Images/MiddleBanner.jpg"), url("Images/Bottom Banner.png");
background-size: 100% 10%, 100% 15%, 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.weddingWebsite{
position: fixed;
top: 65%;
left: 65%;
transform: translateX(-65%) translateY(-65%);
max-width: 80%;
max-height: 60%;
}
.wedding{
max-width: 80%;
max-height: 60%;
}
It might be easier if you use position: relative; instead of position: absolute;
And you didn't close div class="Michael"> properly you forgot the / in the closing div-tag.
I didn't have the picture but came up with something that works down to 500px in screen width.
HTML:
<div class="wrapper">
<div class="michael">
<p class="m">Michael</p>
</div>
<div class="ringhead">
<img src="Images/gold.gif" class="ring" alt="Wedding Ring" `enter code here`width="100" height="60">
</div>
<div class="christina">
<p class="c">Christina</p>
</div>
<div class="weddingWebsite">
<img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website;">
</div>
CSS:
.wrapper {
width: 479px;
height: 100px;
margin: 0 auto;
/* padding: 0 5%; */
display: block;
}
.michael {
color: #EEE8AA;
position: relative;
text-transform: uppercase;
font-size: 30px;
width: 200px;
float: left;
display: inline-block;
border: 1px solid black;
/* max-width: 100%; */
/* max-height: 100%; */
/* left: 30%; */
/* top: 0%; */
}
.m{
max-width: 100%;
max-height 100%;
}
.ringhead {
position: relative;
/* max-width: 100%; */
/* max-height: 100%; */
float: left;
border: 1px solid black;
display: inline-block;
/* left: 50%; */
/* top: 4%; */
}
.ring{
max-width: 100%;
max-height: 100%;
}
.christina {
color: #EEE8AA;
position: relative;
float: left;
border: 1px solid black;
/* top: 0%; */
text-transform: uppercase;
font-size: 30px;
/* max-width: 100%; */
/* max-height: 100%; */
}
.c{
max-width: 100%;
max-height: 100%;
}
body{
background-image: url("Images/Top Banner.jpg"), url("Images/MiddleBanner.jpg"), url("Images/Bottom Banner.png");
background-size: 100% 10%, 100% 15%, 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.weddingWebsite{
position: fixed;
top: 65%;
left: 65%;
transform: translateX(-65%) translateY(-65%);
max-width: 80%;
max-height: 60%;
}
.wedding{
max-width: 80%;
max-height: 60%;
}
Here is the link to a fiddle: https://fiddle.jshell.net/hzxsvLzz/1/
I want #main to be 100%, but not affected by #upper -- pushed down by 39px and making the page scrollable. Overflow: hidden on body won't do it for me, since I need to see content at the bottom. How do I fix this? Something similar to sticky footer, or? I don't seem to understand it.
<body>
<div id="upper"></div>
<div id="main">
<div id="box"></div>
</div>
</body>
html, body {
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
}
#upper {
height: 39px;
width: 100%;
background: #212121;
}
#main {
display: block;
width: 100%;
min-height: 100%;
margin: 0 auto;
background: blue;
}
Picture of how it looks http://i46.tinypic.com/25k1jcn.jpg
An alternative to #Zoltan's answer:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
}
#upper {
height: 39px;
width: 100%;
background: #212121;
position: fixed;
top: 0;
left: 0;
}
#main {
display: block;
width: 100%;
margin: 0 auto;
background: lightblue;
position: fixed;
top: 39px;
bottom: 0;
}
<div id="upper"></div>
<div id="main">
<div id="box">Hi</div>
</div>
Try this - http://jsfiddle.net/ax7nq/
html, body {
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
}
#upper {
height: 39px;
width: 100%;
background: #212121;
position: absolute;
}
#main {
display: block;
width: 100%;
min-height: 100%;
margin: 0 auto;
background: lightblue;
}
#box {
padding-top: 39px;
}
Try changing #upper to this:
#upper
{
height: 39px;
width: 100%;
background: #212121;
position:absolute;
left:0;
top:0;
}