How to place object in percentage of the entire screen in HTML, not just placing next to the previous object? For example, <div> at the location of 50% screen's width, 30% screen's height.
There's some requirements for this:
Objects should be able to be placed to the desired location by percentage of the entire screen, no matter of other objects.
Objects should be able to overwrap other objects at the same location.
Sorry for poor English :|
I am not sure about your question. Let me try to answer it. In the css we have variable call vh for viewport height and vw for viewport width.
The idea is to place the element 30% of height = 30vh, and 50% width = 50vw. We can set the parent element to have relative, and the child that you want to set position with absolute position.
It would be something like below. Thanks
body {
position: relative;
width: 100%;
height: 100%;
display: block;
color: #fff;
background: #000;
}
#screen .child {
position: absolute;
top: 30vh;
left: 50vw;
background: red;
width: 100px;
height: 50px;
}
<div id="screen">
Parent
<div class="child">
</div>
</div>
Try this CSS
.fixed-div{
position: fixed;
left: 50vw;
top: 30vh;
transform: translate(-50%, -50%); /* Moves the center of the element to its original top left corner*/
z-index: 1;
}
Related
I'm trying to make a fixed position div stuck to the bottom of the page, that has the starting height, 70% of the screen ( like vh ).
I will make it resizable with jQuery resizable.
The problem is that if I apply height: 70vh or height: 70%, the div resizes when the user resizes the browser height, and I want to keep it the same.
Any idea what to do?
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
background-color: red;
}
<div>
</div>
View the snippet in full page.
vh or % will be relative to the height of the viewport or screen height. So we need to set the initial height of the div with JavaScript on DOM load.
Next (The resizing part) can be done with CSS resize property.
**PS: In the div bottom right corner you can see the resize icon and do the resizing.
document.getElementById("demo").style.height = window.innerHeight*.7+"px";
div {
position: fixed;
bottom: 0px;
width: 500px;
background-color: red;
resize:vertical;
overflow:auto;
}
<div id="demo"></div>
You can add min-height to div so that it will not resize itself beyond a specific height.
Like this
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
min-height: 500px;
background-color: red;
}
<div>
</div>
There is NO problem to set them side by side.
BUT - Can one div be outside of the screen width?
I want to insert DIV2 above DIV1 with animation, while DIV2 is already open and ready to be seen, but I don't want to play with its width or display, only
change is position so it will enter the screen from the side.
The two divs should be 100% width and height. Can that be accomplish some how?
I can set overflow-x to be hidden, so no horizontal scroll, but I think there is a problem with width 100% for both of them.
Please advise.
It can be done with absolute positioning. For 2nd div set width: 100% and left: 100%
<div id="wrapper">
<div id="div1">
</div>
<div id="div2">
</div>
</div>
CSS
#wrapper{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
#div1{
background: yellow;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#div2{
background: green;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 100%;
}
https://jsfiddle.net/p1ga7669/
The approach you'd like to take wouldn't work with width:100%. In order to use this approach the width of both child divs have to be explicitely set (not in percentage).
Since you're using javascript though, you could try and measure the available width of the parent container and then use that value. If you're using jquery you could use an expression like
$('#parentContainer').outerWidth()
to get this value.
I am trying to achieve that the width of the div is always 50% of the body. E.g. when I resize the window, the div should become smaller.
But the div size applied does not work at all when % is used.
See here
What I don't want to do is to be forced to specify a width of body. Since that is exactly, that should be variable
CSS
.someclass{
width: 50%;
height: 50%;
background-color: #444444;
}
body {
background-color: cyan;
}
HTML
<div class="someclass"> </div>
Add a position absolute... http://codepen.io/anon/pen/jlnIy
.someclass{
width: 50%;
height: 50%;
position: absolute;
background-color: #444444;
}
I want a child div with a op-margin via percentage. The y-position shall be 50% percent of the parent div. But it is somehow more. Why isn't it 50% ?
js fiddle
HTML
<div class="content">
<header></header>
</div>
CSS
.content {
width: 300px;
height: 200px;
background: blue;
position: relative;
clear: both;
}
.content header {
width: 100px;
height: 100px;
margin-top: 50%;
background: red;
position: relative;
float: left;
}
This is because when it comes to top/bottom margins and paddings in percentages, the values will be taken as the fractional width of the parent element, not the height. According to the W3C definition:
The [margin] percentage is calculated with respect to the width of the
generated box's containing block. Note that this is true for
'margin-top' and 'margin-bottom' as well. If the containing block's
width depends on this element, then the resulting layout is undefined
in CSS 2.1.
This question has been addressed before in StackOverflow - see here.
Suggestion: If you would want to position an element in the center vertically, you can use the following trick instead:
Position the child element absolutely
Declare dimensions for the parent, such that the parent's dimensions do not rely on those of the child
Position the child element 50% from the top
Use a nifty trick of CSS 2D translation.
Here's the modified CSS from your fiddle that works:
.content header {
width: 100px;
height: 100px;
top: 50%;
background: red;
position: absolute;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
http://jsfiddle.net/teddyrised/73xkT/7/
Change child's position from relative to absolute.
Instead of margin-top use top
http://jsfiddle.net/73xkT/5/
.content header {
top: 50%;
position: absolute;
}
let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot).
So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?
Thank you very much indeed!
Matteo
You could use javascript yo get the size of the image and then set the css left value needed.
Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.
You should wrap the image in another block element and put a negative left position to the image.
Something like this:
<div id="something">
<div class="imagewrap">
<img>
</div>
</div>
Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.
have you tried;
name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }
give that a go.
No need to use Javascript, this can be done in CSS.
The required HTML: (you must change the div to an img obviously)
<div id="container">
<div id="imgwrapper">
<div id="img">Change this div-tag to an img-tag</div>
</div>
</div>
The required CSS:
#container
{
position: absolute;
left: 200px;
top: 100px;
height: auto;
overflow: visible;
border: 2px dashed green;
}
#imgwrapper
{
position: relative;
margin-left: -50%;
margin-top: -50%;
padding-top: 25%;
border: 2px dashed blue;
}
#img
{
display: block;
width: 200px;
height: 100px;
border: 2px solid red;
}
Click here for a jsFiddle link
The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;)
But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.
Probably one of the simplest solutions is to place the image in the upper left corner at position
left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:
#theDiv {
position: absolute;
left: 100px;
top: 100px;
background: yellow;
width: 200px;
height: 200px;
}
#theImage {
background: green;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>