body{
max-width:1366px;
}
.gotop{
position:fixed;
right:9px;
bottom:7px;
cursor:pointer;
width:25px;
}
gotop is a button to scroll page on top and it must not be scrollable, i.e. must be fixed.
Problem is on monitors greater than 1366 px. The button is far right from the body.
How to keep it fixed, but inside body?
One possible solution is to omit top, right, bottom, left values for the fixed button. This way it will be sticked to the container:
.container {
position: relative;
max-width: 800px;
height: 200vh; /* for scrolling demo */
margin: 0 auto;
border: 1px solid black;
}
.button-wrapper {
position: absolute;
right: 35px; /* button width plus margin */
top: 30%; /* or whatever you need */
}
.button {
position: fixed;
width: 25px;
height: 25px;
cursor: pointer;
background: black;
}
<div class="container">
<div class="button-wrapper">
<div class="button"></div>
</div>
</div>
Try This
body{
max-width:1366px;
background:#f1f1f1;
}
.gotop{
position:absolute;
right:25px;
bottom:25px;
cursor:pointer;
}
<body>
<button class='gotop'>TOP</button>
</body>
I wouldn't recommend using max-width on the body... you should put it on a div that wraps everything in the page instead.
Then place your button at the bottom of wrapper with the following CSS applied. Tweak the values to get a better position if you need it.
.wrapper{
position: relative;
height:200vh;
width: 100%;
max-width:400px;
background: #000;
}
.holder{
position: absolute;
top:92.5%;
right:0;
background: #ccc;
}
.button{
height:30px;
width: 70px;
position: fixed;
margin-left:-70px; /* minus width */
bottom:10%;
}
<div class="wrapper">
<div class="holder">
<button class="button">Test</button>
</div>
</div>
What you asking is rather an old way of doing things but it can be achieved.
Set the width of body.
Set fixed element to center.
Offset center by width of body and fixed element.
html,
body {
position:relative;
height: 100%;
max-width: 200px;
margin: 0 auto;
border:1px solid #111;
}
.gotop {
position: fixed;
left:50%;
bottom: 7px;
cursor: pointer;
width:40px;
background:#eee;
margin-left:60px;/*half width of body minus width of gotop*/
}
<div class="gotop">TOP</div>
Related
I'm trying to center a div inside a parent div based on the dimensions of the parent div. I have tried using:
display: inline-block;
because I have seen other questions where this was used to center the div but I am not having luck.
BOX1 should be centered insdie of test
<div class="tab-pane" id = "test">
<div id="Box2">
<h1> Graph Text </h1>
</div>
<div id="BOX1">
</div>
</div>
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
display: inline-block;
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
http://jsfiddle.net/bahanson/xvL2qvx0/5/
try this :demo
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
margin:0 auto;
width: 500px;
height: 300px;
background: lightgrey;
position:relative;
z-index:1;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
<div id="test" class="tab-pane">
<div id="BOX1">
<div id="Box2">
<h1> Graph Text </h1>
</div>
</div>
</div>
Adding this to the box 1 css does what you want and will keep the child centered if the parent width changes.
left: 50%;
margin-left: -250px;
http://jsfiddle.net/xvL2qvx0/6/
If you don't need IE8 support you can just use:
left: calc(50% - 250px);
You should read up on normal flow and CSS positioning.
http://webdesign.about.com/od/cssglossary/g/bldefnormalflow.htm
But basically, a div will always position relative to the parent div.
If you add margin: 0 auto; to a div, it should horizontally position it within the parent div
#BOX1 {
display: inline-block;
margin-left:100px;
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
}
use margin-left command to adjust it to the centre....
Seen as though you are using absolute positioning you can simply give it a top,right,left and bottom of 0 and use margin:auto to centre it both horizontally and vertically.
This benefits from be able to use relative (percentage) sizing if you want and there's no maths involved. Furthermore, if you later change the dimensions (maybe via a media-query for mobile devices) you don't need to recalculate messy margins or offsets - just change the size and it will be centred.
#BOX1 {
display: block;
width: 500px; /* it will still work if you change the size */
height: 300px; /* the dimensions could be percentages if you like */
background: lightgrey;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
http://jsfiddle.net/xvL2qvx0/7/
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
<div class="tab-pane" id = "test">
<div id="Box2">
<h1> Graph Text </h1>
</div>
<div id="BOX1">
</div>
</div>
I need the following to happen in my website:
The counter and logo (top, bottom) should always have the same height and stay on the top and bottom even though the screen height will decrease/increase. BUT the 2 other divs in between should get smaller/bigger when the window changes. I hope with this example its easier to understand:
The logo will disappear when the screen height is too low, right now. Here is the css:
The section is 80% width and aside 20%, but that doesnt really matter here...
#countdown{
padding: 0.5em 0.5em 0.5em 3em;
margin: 0.5em;}
#addProject{
margin: 0.5em;
padding: 0 1em;
height: 44%;
overflow-y: auto;}
#Nye{
margin: 0.5em;
padding: 0 1em;
overflow-y: auto;
height: 40%;
}
#logo{
margin: 1em;
height: 5em;
}
#Rémi offered a good start, but I would recommend using position: fixed.
This will anchor your elements to the browser window, regardless of the amount of your content.
e.g.:
.counter, .middle1, .middle2, .logo {
position: fixed;
width: 20%;
min-width: 200px;
right:0;
}
.counter {
background: yellow;
top:0;
height: 50px;
}
.middle1 {
overflow: scroll;
background: blue;
top:50px;
bottom: 50%;
}
.middle2 {
overflow: scroll;
background: green;
top: 50%;
bottom:50px;
}
.logo {
background: pink;
bottom:0;
height: 50px;
}
See http://jsfiddle.net/uKPEn/1/
It's a little tricky but I discovered by doing it that it is actually doable without javascript. Here is a fiddle to illustrate it http://jsfiddle.net/2LyUy/3/
You have to do 3 things:
wrap your two middle divs in a new div, for example with id="wrap".
put a different position attribute on your aside (for example "relative", which will actually not move your div at all)
then have fixed size counter and logo
The css gives that (don't forget to wrap your 2 middle divs with a new one):
aside#test { position: relative; }
/* so that the "absolute" below work as expected */
/* any of "relative" "absolute" or "fixed" positioning would work here, depending on the needs */
#countdown {
position: absolute; left:0; right:0; /* could be factored out if preferred */
top:0; height: 150px;
}
#logo {
position: absolute; left:0; right:0;
bottom:0; height: 50px;
}
#wrap {
position: absolute; left:0; right:0;
top:150px; bottom: 50px;
}
#addProject {
position: absolute; left:0; right:0;
top:0; height:50%;
}
#Nye {
position: absolute; left:0; right:0;
bottom:0; height:50%;
}
Here is the div wrapping code extract:
</div></div>
<div id="wrap"> <!-- added -->
<div id="addProject"
....
<br>
</div>
</div> <!-- added -->
<div .... id="logo"></div>
Just tired up with the problem with 2 div aligning vertically. I tried horizontal scroll is appear in browsers, how to get rid of scroll?
I have this html:
<div id="responsive-admin-menu"></div>
<div id="content-wrapper"></div>
The css code is
#responsive-admin-menu {
width: 200px;
left:0px;
background-color: #404040;
height: 100%;
position: absolute;
min-height: 500px;
}
#content-wrapper {
position:absolute;
overflow:auto;
width:100%;
margin-left: 200px;
right:200px;
background-color: #fff;
padding: 15px;
}
I assume you want to create a two columns fluid layout, where you have your #responsive-admin-menu to the left and #content-wrapper to the right, and they fill the entire browser window.
In this case I suggest to define the width of both divs in percent and let them float one to the left and the other to the right:
#responsive-admin-menu {
width: 30%;
float:left;
}
#content-wrapper {
width: 70%;
float:right;
}
take a look here where I edited your code.
My Codepen
Use left/top/right/bottom for to give "anonymous" width and height.
Your CSS
#responsive-admin-menu {
position: absolute;
width: 200px;
left:0px;
top:0px;
bottom:0px;
background-color: #404040;
min-height:500px;
}
#content-wrapper {
position:absolute;
overflow:auto;
top:0px;
left:200px;
right:0px;
background-color: green;
padding: 15px;
}
thanks for helping out. I have a site with a container div that I'd like to stretch to the bottom of the page. Using position: fixed I'm able to achieve this, but the footer text on the bottom is cutoff and you are unable to scroll down.
Using position: relative I'm able to scroll, but the container div does not stretch to the bottom of the page.
My code is as follows:
.container {
position: relative;
bottom: 0;
top: 0;
left: 50%;
margin-left: -480px;
width: 960px;
height: auto;
background-color: #1b1a1a;
}
.body {
width: 703px;
min-height: 340px;
margin: auto;
background-color: #f2f2f2;
padding: 20px;
overflow: hidden;
}
<div class="container">
<div class="header"></div>
<div class="body">
content content content
</div>
<div class="footer"></div>
</div>
Is this what you are looking for?
http://jsfiddle.net/gespinha/jrsxN/7/
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
.container {
width:100%;
height:100%;
position: absolute;
background-color: #1b1a1a;
}
.body {
background-color: #f2f2f2;
padding: 20px 20px 120px;
}
.footer {
width:100%;
height:100px;
position:fixed;
bottom:0;
background:#f00;
}
I would like to align a image in the middle. Very easy by giving the div a width and a margin: auto;. But the div should also carry the position: fixed; property, which doesn't go together as it turns out.
Here is my HTML:
<div class="header_container">
<div class="header">
<div class="header_links_icon">
<a href="https://www.facebook.com target="_blank" class="header_facebook">
<div class="header_facebook_icon"> </div>
</a>
<a href="https://twitter.com/" target="_blank" class="header_facebook">
<div class="header_twitter_icon"> </div>
</a>
</div>
</div>
</div>
And here is the CSS I'm using:
.header_container {
background-color: black;
padding-top: 35px;
}
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
margin: auto;
width: 1440px;
position: fixed
}
And it's the header.png image that should be aligned in the middle of the screen AND being positioned fixed... How can I manage to do this?
You could make your header container fixed, then your .header would work:
.header_container {
background-color: black;
padding-top: 35px;
position: fixed;
top:0;
left:0;
right:0;
}
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
width: 1440px;
margin: auto;
}
The other way would be with negative margins:
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
width: 1440px;
position: fixed;
left: 50%;
margin-left: -720px;
}
You have to set the left position to fifty percent and the margin-left to one half the element's width. This only works for items that have a set width.
http://jsfiddle.net/W9ZcY/
.header_container {
background-color: black;
padding-top: 35px;
border: 1px solid red;
}
.header {
border: 1px solid blue;
background: gray;
height: 105px;
left: 50%;
margin-left: -70px;
width: 140px;
position: fixed
}
The issue is that you can either position a fixed element with percentages or pixels. Neither of them will do the proper offset calculation to make it truly centered. So you must sortof hack the placement to make it behave properly.
Positioning by percentage and offsetting with negative margins:
//assuming the block is 200px wide and 100px tall
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Alternatively, you can center it by fixing placement of a container then center your object within that container (as mentioned by #rgthree), this also works.
This will probably work:
.center {width:1440px;margin:0 auto;}
.header {width:1440px;position:fixed;etc...} // don't use margin:auto here
where
<div class='header_container>
<div class='center'>
<div class='header'>
<!-- contents -->
</div>
</div>
<div>
Hi you can give the fixed position to the main header_container class so that will work.
.header_container {
background-color: black;
position: fixed;
top:0;
left:0;
right:0;
}
.header {
background:green;
height: 100px;
width: 500px;
margin: auto;
}
please see the demo:- http://jsfiddle.net/rohitazad/W9ZcY/17/
Give position fixed in your parent header class rather than using fixed position in header child class...
.header_container {
position: fixed;
top:0;
left:0;
right:0;
}