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;
}
Related
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>
I have big doubt about fixed, relative , absolute container
I have a css code like this
.header {
position:fixed;
width:100%;
height:60px;
}
.page, .footer {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
}
and my html code like this...
<div class="header">--fixed content--</div>
<div class="page">--page content</div>
<div class="footer">--footer content--</div>
I have used bootstrap for button styles. problem is the header div is fixed but the content inside the page & footer goes over the header content. When I remove position:relative; from page & footer css it works fine. But also bootstrap buttons goes still goes up.
try this:
.header {
position:fixed;
width:100%;
height:60px;
background: black;
color: white;
top: 0;
left: 0;
z-index: 10;
}
.page {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
background: #999;
height:500px;
color: white;
padding-top: 60px;
margin: auto;
}
.footer {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
background: #666;
height:100px;
color: white;
margin: auto;
}
Fiddle Example
Adding a z-index will keep your header always on top of other content. You can change its value as per your content.
add the padding-top to your '.page' to avoid any overlapping of header on the body content.
You should be using like this:
.header {
position:fixed;
width:100%;
height:60px;
z-index: 99999999;/*adding higher index value than other divs*/
/* This will ensure the header div always on top of other divs */
}
.page{
position: relative;
top: 61px;/* plus 1px height as of .header or use as per your requirement */
/* but at least this should be 60px to show your .page div */
}
Then, just other divs you don't need to define the top value for this issue(overlaps).
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>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 9 years ago.
I want to center a div horizontally and vertically at all times.
I can reduce/increase the width of the window and the div will respond by always remaining in the center of the window
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
}
Here is a JSFiddle Example of what I have currently.
But I want to keep the div centered vertically as well so if I reduce/increase the height of the window the the div will respond by staying in the middle of the window.
In regards to the example, I want to keep the blackbox vertically centered on window resize in the same way it always stays in the center horizontally.
You can do this with CSS tables:
JsFiddle
Markup
<div class="container">
<div class="cent"></div>
</div>
(Relevant) CSS
html,body
{
height: 100%;
}
body
{
display: table;
margin: 0 auto;
}
.container
{
height: 100%;
display: table-cell;
vertical-align: middle;
}
.cent
{
height: 50px;
width: 50px;
background-color: black;
}
try this
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
Demo link is here
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
position:absolute;
left:50%;
top:50%;
margin-left:-25px;
margin-top:-25px;
}
Test this
.cent {
width: 50px;
height: 50px;
background-color: black;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:auto;
}
here you have a example: http://jsbin.com/iquviq/30/edit
Check this
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
margin-top:50%;
}
try this
http://jsfiddle.net/tVuS6/4/
.cent
{
height:50px;
width:50px;
background-color:black;
margin-left: -150px;
margin-top: -150px;
margin:auto;
position:absolute;
top:50%;
left:50%;
}
.cent
{
height:50px;
width:50px;
background-color:black;
position:absolute;
left:50%;
top:50%;
margin: 0 auto;
}
Usually margin: 0 auto; does the horizontal alignment and vertical-align: middle for vertical alignment. I tried it but not working.
Try the below css
.cent {
height: 50px;
width: 50px;
background: #222;
position: absolute;
margin: -50px 0 0 -50px;
left: 50%;
top: 50%;
}
Check it in JSFiddle.
To know more about the trick check Dead Center an Element.
How to create fixed height 1st column layout?
I saw a kevinrose.com blog and i liked it, simple and clean layout, i wanted to use that layout so i was trying to create it but i stuck with this fixed height, i can easily set fixed bar like header, but column, i dont know how to do it
example:
#sidebar
{
background-color: red;
height: 700px;
width: 100px;
float: left;
}
#article
{
background-color: blue;
height: 400px;
width: 200px;
float: left;
}
#like
{
background-color: green;
height: 100px;
width: 200px;
position: fixed;
float: left;
z-index:-5;
}
Use position:fixed on the sidebar, and offset the rest using a margin
#sidebar
{
background-color: red;
width: 100px;
position: fixed;
}
#article
{
background-color: blue;
width: 200px;
margin-left: 100px;
}
Position fixed is how you achieve that. Have a look here: http://jsfiddle.net/wpHMA/
.wrap {
width:100%;
height:100%;
overflow:auto;
position:relative;
}
.sidebar {
background:#333;
color:#fff;
width:25%;
height:100%;
position:fixed;
top:0;
left:0;
}
.content {
width:75%;
float:right;
}
As per your given example "kevinrose.com" left panel is fixed position structure.
You can use following css/html code structure
Css
.leftPan{
width:27%;
background-color:#CCC;
position:fixed;
left:0;
min-height:100%;
}
.rightPan{
margin-left:27%;
height:1000px;
background-color:#999;
}
Html
<div class="leftPan">
Left Panel
</div>
<div class="rightPan">
Right Panel
</div>
here is jsFiddle File