I have a div with some text on my page, and I want it to be at the bottom. I did this using fixed positioning:
div#popup{
position: fixed;
bottom: 0;
But I also want it to be centered. I tried giving it a width of 40% and auto margins, but that doesn't work (it doesn't work with the combination of the above code) :
div#popup{
position: fixed;
bottom: 0;
width: 40%;
margin-left: auto;
margin- right: auto;
How can I achieve this?
Thanks.
If you know width of div you can use negative margin-left for horizontal position (which equals half of width).
div {
position: fixed;
bottom: 0;
left: 50%;
width: 40%;
height: 30px;
margin-left: -20%;
background: blue;
}
JSFiddle
If you don't know width, just use wrapper and inline-blocks:
HTML:
<section>
<div>la-la-la</div>
</section>
CSS:
section {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
div {
display: inline-block;
border: 1px solid red;
color: red;
}
JSFiddle
I encourage You to check two nice tutorials (quick read):
http://www.barelyfitz.com/screencast/html-training/css/positioning
http://learnlayout.com/position.html
I think You need to describe position like this:
div#popup{
position: fixed;
bottom: 0;
right: 50%;
}
First off, you should never use fixed positioning to get your footer to stick to the bottom. To get the footer to stick to the bottom of the screen, set all your divs to relative, then add an extra div the same height as the footer (set a height for your footer) between the content and the footer. Then put a margin of negative that height on your content div. Works perfectly.
To centre it, use width auto and margin left and right auto or just use text-align center
Related
I am trying to add a fixed division to the left of the webpage that will keep the navbar information and on the right I am trying to add another division. It is currently not allowing me to put them side by side (the one I wanted to add to the right is overlapping with fixed). How can I align them side by side?
Here is my CSS:
.left_fixed {
position: fixed;
width: 16%;
top: 0px;
bottom: 0px;
left: 0px;
background-color: #041230;
z-index: 100;
min-width: 170px;
}
.right_side {
position: relative;
width: 100%;
height: 100vh;
}
since you set a width:16% for the fixed element you should set the rest 84% width:84% to the right element.
Next set a max-width to the right element since the left element has a min-width I have set this to max-width: calc(100% - 170px)
Align the right element to the right by adding float: right.
I have made the left element translucent so you can see that there is no overlap.
Read and run the snippet below to understand it in detail.
P.S : I have made the left element translucent so you can see that there is no overlap.
Hope it helps
.left_fixed {
position: fixed;
width: 16%;
top: 0px;
bottom: 0px;
left: 0px;
background-color: #0412303f;
z-index: 100;
min-width: 170px;
}
.right_side {
width: 84%;
background-color: green;
height: 100vh;
float: right;
max-width: calc(100% - 170px);
}
body {
margin: 0px;
}
<div class="left_fixed">
<h1>LEFT SIDE</h1>
</div>
<div class="right_side">
<h1>RIGHT SIDE</h1>
</div>
The reason that your styling fails is that the "Position: Relative" will not be relative to the "Position: fixed".
In order to accomplish the effect you are looking for I'd suggest you to use float:left on both elements instead.
You can wrap the two divs inside a parent div, and then add display flex to the parent div. This will make the two divs next to each other, and then you can add custom width to .left_fixed.
I'm sure I'm going to muddle the explanation of what I'm trying to do, so sorry in advance.
I have two absolutely positioned <div> elements right next to each other that are the exact same height, and the one on the right can potentially have horizontal overflow.
When there is horizontal overflow I would like the scrollbar on that div (and that div only) to remain fixed at the bottom of that div while both divs continue to scroll vertically together when there is also vertical overflow.
The point being that I want the div on the left to remain fixed in its position. Many modern text editors have this feature (pay attention to the scrollbar at the bottom and the column on the left that contains the line numbers):
Before scrolling:
After scrolling HORIZONTALLY:
After scrolling VERTICALLY:
the line numbers on the left stay fixed, regardless of how far to the right you scroll, but they scroll vertically with the page and the horizontal scrollbar is always available.
I've been playing with every combination of relative/absolute positioned container elements to try and solve this problem, but I've been coming up short. Here is my most recent attempt though:
#div1
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 150%;
width: 60px;
background: black;
}
#outer
{
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow-x: auto;
}
#div2
{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150%;
background: grey;
overflow-x: scroll;
}
#div2-wrapper
{
position: absolute;
top: 0;
right: 0;
left: 60px;
height: 50%;
}
#div1-wrapper
{
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 60px;
}
<div id="outer">
<div id="div1-wrapper">
<div id="div1">
</div>
</div>
<div id="div2-wrapper">
<div id="div2">
</div>
</div>
</div>
I would like to avoid using jQuery if it's possible, but I also have that available if it comes to it.
Edit: to clarify, there are three requirements I'm trying to satisfy. 1: the div on the left must always remain in its starting position horizontally (scrolling left or right does not move it), 2: the div on the left must scroll vertically with the div beside it, 3: if there is horizontal overflow in the right-hand div, the scrollbar for it must always remain at the bottom of the screen. Gooogle Sheets and Excel do it too with row numbers.
I think this should be what you want :
https://jsfiddle.net/pwo678ks/
I'm position the two columns next to each other with display: flex on the parent (but you could use float: left if you prefer). Then, the parent is scrolling vertically, and the second div alone is scrolling horizontally. If the line-height is the same in the 2 divs, you should be fine.
Edit : And you can remove the divs inside the wrappers.
#outer
{
display: flex;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow-x: none;
overflow-y: auto;
}
#div1-wrapper, #div2-wrapper
{
height: 100%;
}
#div2-wrapper
{
white-space: nowrap;
overflow-x: scroll;
}
#div1-wrapper
{
width: 60px;
}
I'm trying to create my first web page. But I have a problem, I searched a lot about it but I still cannot solve it. So, the problem is, that my div (which is something like a background for the left side of the page, it has no content, only coloured background) is not stretching to the bottom of the page, it just stretches to the bottom of the screen, so when I scroll down the div is missing from there.
It looks like this (http://postimg.org/image/aiiabtue1/)
HTML:
<body>
<div class="left_strip"></div>
</body>
CSS:
.left_strip {
position: absolute;
left: 50%;
width: 203px;
height: 100%;
top: 158px;
background: rgb(251, 236, 236);
margin-left: -500px;
}
Use position: relative on the body tag and bottom: 0 instead of height: 100% on the .left_strip.
With just position: relative on the body tag the element will be 100% height, but because of the 158px distance from the top the bottom will be 158px below the content.
bottom: 0 will fix the bottom of the element to the bottom of the closest "positioned" (relative, absolute, fixed) parent element.
body {
position: relative;
}
.left_strip {
position:absolute;
width:203px;
top: 158px;
bottom: 0;
background-color: blue;
}
.content {
height: 2000px;
background-color: red;
margin-left: 250px;
}
<div class="content"></div>
<div class="left_strip">Test content</div>
Instead of using % try using the exact pixel value of the body tag.
What also might help is using a % value that is higher than 100, this also seems to work in testing.
I have a div with a width of 465px, and I want to keep it centered when the page is resized. I can't manage to really center it when using a set width rather than using a %.
Example: I had used "margin-left: 40%;" but when the screen is small, the div gets pushed too far to the right (because it doesn't shrink with the screen), and when the page is full screen the div sits too far left.
You can do this:
div {
position: absolute;
left: 50%; // Position 50%
top: 50%;
width: 465px;
height: 465px;
margin: -232px 0 0 -232px; // - ( width / 2 ) to center and height
}
As long as you have a width set, simply use this in your CSS for consistent horizontal centering.
.name-of-div {
width:465px;
margin:auto auto;
}
Further.. if you would like it centered both horizontally and vertically take a look at this page which demonstrates the following CSS
.name-of-div {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
http://codepen.io/shshaw/full/gEiDt
also this should work margin:0 auto;
A related question is here and the answer does not work for me. In brief there are 2 columns left and right. And the right column have a children <div> or <section> or something. When the page is scrolled, the children must not scroll or move. Adding position: absolute to the child lets the child to scroll along with the page. And position:fixed making the child to appear at screen's extreme left or right and screen top depending on right:0 or left:0. How to make this fixed inside the right column?
The JSFIDDLE is here.
You can modify .right-inner class as follows to get the desired result
.right-inner{
position: fixed;
margin-right: 5%;
text-align: middle;
}
see the updated Fiddle
Instead of 0, the value of .right's left-position should be (at least) the value of the width of the left column
for example:
.right{
position: fixed;
top: 0;
left: 360px;
}
You don't need the wrapper for .right, so I've elliminated it in this fork of your fiddle: http://jsfiddle.net/ynMYm/
Try this:
.outer{
display: block;
width: 600px;
}
.left{
width: 350px;
border-right: 1px solid #555;
float: left;
}
.right{
top: 0;
left: 0;
width: 250px;
margin-left:350px;
position: fixed;
}
.right-inner{
position: fixed;
}
Fiddle: http://jsfiddle.net/5wM4V/42/
Full screen view: http://jsfiddle.net/5wM4V/42/embedded/result/