I have a div box which I've positioned on the right hand side of the browser, the top border is fine, but I need the bottom of the box to be 140px off the bottom of the browser and I can't seem to get this to work.
Ay ideas?
#nav-right {
position: absolute;
top:120px;
bottom: 140px;
right: 0;
width: 120px;
height: 100%;
}
Your code is over-constrained because you specify definite lengths for top, height and bottom.
Two constraints are enough. Don't specify a height, let it be the default auto.
#nav-right {
position: absolute;
top: 120px;
bottom: 140px;
right: 0;
width: 120px;
background: blue;
}
<div id="nav-right"></div>
#nav-right {
position: absolute;
bottom: 140px;
right: 0;
width: 120px;
height: calc(100% - 120px - 140px);
}
Related
I loosely followed a basic CSS lightbox template from w3 schools for modal lightboxes. I haven't gotten to the Javascript yet, but just laying out the look and style of the lightbox.
I have a fixed position div element serving as the grey background, and inside that the "lightbox-content" div to hold an iframe of a Vimeo link. I followed a workaround to make the iframe responsive by containing it inside another div and adjusting the styling. I want the max-width of my iframe to be 1280px, but up to 100% width on anything smaller.
Everything works great on smaller screens, the iframe and contained link fills the width, stays vertically centered, and scales with the page. However, when I go above the 1280, the iframe moves in all sorts of weird ways. I'd like to have it so when the page width goes about 1280 or so,the iframe just stays at a fixed size in the center of the screen at 1280px wide.
I tried using an #media query to change some of the CSS rules, but I'm getting so lost in the position after several hours of trying. I think what's throwing me is having so many div with different types of positioning inside each other, and also not clearly understanding how to properly clear CSS rules within a media query.
Is there anything obvious I've done wrong that I could fix to help resolve the issue? It's hard to see the effect in the tiny result window, so if there's a way to make it full-screen in the browser, hopefully you can see what I'm talking about.
.lightbox {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: auto;
padding-top: 0px;
z-index: 1;
background: rgba(0, 0, 0, .85);
width: 100%;
height: 100%;
}
.lightbox-content {
position: absolute;
width: 100%;
height: auto;
max-width: 1280px;
max-height: 720px;
top: 45%;
left: 50%;
right: 50%;
margin-top: -25%;
margin-left: -50%;
}
.responsive-container {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
#media only screen and (min-width: 1299px) {
.lightbox {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
padding-top: auto;
z-index: 1;
width: 100%;
height: 100%;
}
.lightbox-content {
position: relative;
width: 1280px;
height: 720px;
max-width: none;
max-height: none;
top: 0;
left: 0;
right: 0;
margin-top: auto;
margin-left: auto;
}
.responsive-container {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
}
.responsive-iframe {
position: absolute;
width: 100%;
height: 100%;
border: 0;
}
}
<div id="myLightbox" class="lightbox">
<div class="lightbox-content">
<div class="responsive-container">
<iframe class="responsive-iframe" id="lightbox-window" name="lightbox-window" src="https://player.vimeo.com/video/261201719" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
</div>
I have many div, which are in position:absolute.
I try to avoid their superimposition only with CSS rule. I don't want to change the top value.
.try {
/*some magic?*/
}
#pos1 {
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
top: 50px;
left: 30px;
}
#pos2 {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
top: 90px;
left: 30px;
}
#pos3 {
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
top: 300px;
left: 30px;
}
#pos4 {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
top: 400px;
left: 30px;
}
#current {
position: absolute;
top: 5px;
left: 50px;
}
#expected {
position: absolute;
top: 200px;
left: 50px;
}
<h1 id="current">Current</h1>
<div id="pos1" class="try"></div>
<div id="pos2" class="try"></div>
<h1 id="expected">Expected</h1>
<div id="pos3"></div>
<div id="pos4"></div>
Here is also a jsfiddle :
ps: I supose this behavior it's stupid because I ask for position absolute.
Absolutely positioned elements are removed from the normal flow of the document. That means surrounding content ignore them and occupy their place:
9.6 Absolute positioning
In the absolute positioning model, a box [...] is removed from the
normal flow entirely (it has no impact on later siblings). [...] The
contents of an absolutely positioned element [...] may obscure the
contents of another box (or be obscured themselves), depending on the
stack levels of the overlapping boxes.
So either don't use absolutely positioning, or move your elements (e.g. with margins).
I need the div to be in the center of the page at all times whether user resizes webpage or not.
I have tried using:
margin: auto;
margin: 0 auto;
margin-left: auto; margin-right auto;
but neither of those three worked.
HTML:
<div id="grayinnerbackground">
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width:1000px;
background-color: #D9D9D9;
height: 100%;
position: fixed;
z-index: -1;
}
Here is a fiddle for an example of what I'm talking about.
http://jsfiddle.net/ymvDJ/
Thanks.
If you do want the position to be fixed, add these rules and drop the usual margin trick:
left: 50%;
margin-left: -25px; // half the width of your element
See it here: http://jsfiddle.net/8DfnG/2/
You can use
position: fixed;
left: 50%;
width: 50px;
margin-left: -25px; /* width รท 2 */
Demo: http://jsfiddle.net/ymvDJ/3/
Use:
position: relative
If that still doesn't work you may need to add this as well:
display: block;
"position: fixed" means that no matter what it stays at a x and y coordinate.
You can try this
div#grayinnerbackground {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 50px;
background-color: #D9D9D9;
height: 100%;
}
http://jsfiddle.net/g49Mb/
More about the working here: http://codepen.io/shshaw/full/gEiDt
This this HTML:
<div id="grayinnerbackground">
foo
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 100%;
}
I'm not entirely sure why it didn't work until I put text into the div, checking something now.
UPDATE
Sigh, ok, i'm tired. If the div is empty, and you have a height of 100%, it is going to be 100% the height of its parent, the <body> in this case. Since there is no other content, the <body> has a height of 0. Give the <div> an absolute height, and it will pop in:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 10px;
}
Remove position: fixed, change the width to 50px and make sure you have a 0 before auto in margin: auto.
Update:
To have the div be as high as the window, be sure to set the body and html to height: 100%; too:
body, html {
height: 100%:
}
Updated jsfiddle again
div#ipsko changes width and height to satisfy absolute positioning.
Why img#utas doesn't?
JSFiddle: http://jsfiddle.net/pejh7/1/
HTML code:
<div id="upsko">
<img id="utas" src="http://kharg.czystybeton.pl/108.png" />
<div id="ipsko"></div>
</div>
CSS code:
div#upsko {
position: relative;
top: 200px; left: 200px; width: 100px; height: 100px;
background: rgba(255,0,0,0.5);
}
img#utas {
position: absolute;
top: 10px; left: 10px; right: 10px; bottom: 10px;
}
div#ipsko {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: rgba(0,255,0,0.5);
}
Put the img tag in a div, give the image 100% width and height, and then absolute position the container div, e.g.
HTML:
<div id="upsko">
<div id="utas">
<img src="http://kharg.czystybeton.pl/108.png" />
</div>
<div id="ipsko"></div>
</div>
CSS:
#upsko {
position: relative;
top: 200px; left: 200px; width: 100px; height: 100px;
background: rgba(255,0,0,0.5);
}
#utas {
position: absolute;
top: 10px; left: 10px; right: 10px; bottom: 10px;
}
#utas img { height: 100%; width: 100%; }
#ipsko {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: rgba(0,255,0,0.5);
}
Fiddle
The issues you describe are cause by the image width being unspecified (as other answers have stated) unfortunately without stating a px value for the image size (or converting the top/left/bottom/right and height+width to %) there's no way around this without adding an extra div.
I know adding extra div's is generally considered bad practice, but when it gives you flexibility as above, I think it's generally fine to do.
see the the div "div#ipsko" does not has its own height and width so it inherit its parent height and width . But the image has its own height and width . so you have to specify the height and width of image to make in fit in the div.
img#utas {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
div#upsko {
position: relative;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background: rgba(255,0,0,0.5);
}
img#utas {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
iv#ipsko {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,255,0,0.5);
}
please try above code.
You image's actual width and height are overriding things. (The browser will adjust an img element's dimensions to match that of the actual image, once it's downloaded it and can tell what they are, if no width and height are specified as attributes of the img or in the CSS.)
With a normal div rather than an image, you could reset the width and height back to auto if they were being set somewhere else, but auto for an image takes you back to the actual image dimensions. If you just wanted the image to match the size of the container, a 100% width/height would fix things, but that's not going to work if you want a different size implied by fixed positioning.
The only thing I can think of would be to change the markup so that your image loads inside a div, and then has 100% width.
Example jsFiddle here:
<div id="container">
<img id="utas" src="http://kharg.czystybeton.pl/108.png" />
</div>
div#container {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
width: auto;
height: auto;
}
img#utas {
width: 100%;
height: 100%;
}
I have 3 divs, all positioned: absolute, but the div I want to fill the width of the window will only adapt to the length of the text within it. I want the yellow div #help to fill the remainder of the window.
I know this sounds noob but I cannot find the solution anywhere.
<div id="tab1">tab1</div>
<div id="tab2">tab2</div>
<div id="help">help</div>
#tab1 {position: absolute;
bottom; 0px;
right: 0px;
width: 50px;
height: 20px;
background-color: green;
}
#tab2 {position: absolute;
bottom; 0px;
right: 50px;
width: 50px;
height: 20px;
background-color: yellow;
}
#help {position: absolute;
bottom; 0px;
right: 100px;
height: 20px;
background-color: red;
}
JS Fiddle: http://jsfiddle.net/FBWzX/
If you want #help to stretch, you can set the left and right values at the same time. This trick also works with top and bottom. Absolute positioned elements are quite flexible.
#help {
position: absolute;
left: 0;
right: 100px;
}
jsFiddle Demo