I have square div absolutely positioned on the left side of the screen. How can I constantly push it to the left after reaching some viewport width? The only idea I have is to add resize event listener through javascript and calculate left property of the element to be negative.
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.element {
position: absolute;
top: 0;
left: 0;
width: 100vh;
height: 100vh;
background-color: lightblue;
}
<div class="container">
<div class="element"></div>
</div>
I'm not sure I understood your question. If you just want an element to stick to the left then your code is perfectly fine.
If your goal is to make is to make it stick only with a certain screen width, then I'd suggest you to look at css media
As last, if you want this element to eventually "sink" in the left border, hence outside of the window, I'd suggest you to use a combination of css media and the css calc function.
Hope this is of any help!
Related
My html/css is structured like this:
<div class="grandparent">
<div class="row">...</div>
<div class="absolute-parent">
<div class="absolute-child">...</div>
</div>
</div>
.grandparent {
position: relative;
}
.absolute-parent {
width: *gets set by JS*
height: 30px;
position: absolute;
top: 0;
bottom: 0;
left: *gets set by JS*
overflow: hidden;
margin: 0 auto;
transition: all 0.5s ease-in-out;
}
.absolute-child{
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
bottom: 0;
position: absolute;
top: 0;
left: *gets set by JS*
margin: auto 0;
transition: left 0.5s ease-in-out;
}
.absolute-parent has a fixed height while width and left position get set by javascript depending on the position of a selected element in .row div, it serves as window to absolute-child's content which should be layered with .row-div" content.
Right now .absolute-child only stretches as wide as the content inside of it, I'd like to make it stretch the whole container width of .grandparent div so .absolute-child and .row are right on top of one another.
Cheers !
The only way I can think of, is making the parent div inherit the with of the grand-parent, and making the child inherit the width of the parent. But, the grand parent needs to have a set width for that. Or just setting manually the width of all those divs. It may not be the answer you are expecting, but that is the method I have been using in such situations for a long time.
Since an absolutely positioned element refers to its next higher relatively positioned ancestor for its position and size (if defined in percentage), it should work to simply add width: 100% to .absolute-child to make it as wide as the .grandparent element
I have the following structure:
<div id="hold">
<div id="hold-left">content</div>
<div id="hold-right">content</div>
</div>
hold-left floats to the left and hold-right floats to the right. The widths are 40% and 55% when the page is loaded. The thing is, hold-right is a sort of preview of something and the user needs to be able to resize it.
This is easily done using JavaScript (the user selects a zoom level radio button), however the issue I am now facing is that, if it is enlarged, it drops down beneath hold-left. What I'd like it to do is float over freely to the outside of the parent div.
How do I go about this? Can it be done through CSS at all, or do I need to dynamically resize the parent every time I resize hold-right?
Have you considered using a left margin on .hold-right?
.hold-left{
float:left;
width:40%;
}
.hold-right{
margin-left:45%;
}
Also, generally you should use classes, not IDs.
You can try with display: table, and table-cell.
The table will need to be 100% width and no width specified for table-cell. Then the content will "resize" the cells.
Otherwise, you will need to use javascript to update both cells.
Use position property in css. Checkout this
position: relative; in the parent.
position: absolute; in the each child.
#hold {
position: relative;
}
#hold-left {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
}
#hold-right {
position: absolute;
right: 0;
width: 100px;
height: 200px;
background: yellow;
}
#zoomLevelSelector {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
I have a div that is centered on the middle of the screen. I need to pass some text to the div and the text will be of various lengths. The problem is that when I pass text to the div, it changes size but wont stay centered. Here's a JSFiddle that demonstrates the problem.
I currently center the div like this:
position: absolute;
top: 50%;
left: 50%;
Add this line:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
http://jsfiddle.net/h0d097vp/3/
Your div is not centered. The existing positioning centered the top left corner of the div.
Try this:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
JSfiddle Demo
Can you set constant width?, if so here's your answer JSFiddler
Just added
width: 100px;
right: 0;
left: 0;
margin: auto;
Your div is not centered in the beginning either. left: 50% means that the diff starts at 50%, which means that the start of the div is at the center of the page.
When the div has a width of 200px, than still only the start will be at the center.
You can give the div a fixed width, and than add a negative margin of half the width so the div will really be in the center of the page.
Like
#divError{
width: 200px;
margin-left: -100px;
}
When using top and left they position whichever side they are named directly at the position given. So left: 50% will always have the leftmost side positioned directly at the 50% mark. This is not the center, but starts the left side of the div at the center. The same occurs with top: 50%. In order to use top and left you'd need to know the overall width and height and subtract half of their value from their respective top and left (e.g left: calc(50% - ([width of element] / 2)). Since you are using dynamic content you can't know either the height or the width (unless you make them static.)
So what can you do? There are a few ways, but my favorite at the moment is fairly new. It's called flexbox. It's support is decent. There's a nice snippet from css-tricks as well.
The relevant code to center an element both vertically and horizontally would go like this:
$(document).ready(function() {
$("button").click(function() {
$.get("http://lorem.mannfolio.com/", function(data) {
var lorem = data.split("\n\n");
$(".centered").html(lorem[0]);
});
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border: 1px solid black;
}
button {
position: fixed;
top: 10px;
left: 10px;
}
<button>Change text</button>
<div class="container">
<div class="centered">I'm centered No matter what you put in me.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have an image that I want to center in the middle of a div, the div can grow and shrink according to the size of the window, the image can also differ in size and should never be larger than the surrounding div.
I have managed to do this by using the following HTML:
<div class="imgspace">
<img src="/variable.jpeg">
</div>
CSS:
.imgspace {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.imgspace img {
position: absolute;
margin: auto;
max-width: 100%;
max-height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Now I want to implement a simple set of controls for the image. They should be layed out in three divs surrounding the image on the left, bottom and right side. The divs should grow and shrink with the image as it changes, both considering viewport size changes as well as actual image size.
Is this possible to achieve using only CSS or do I have to involve javascript?
Here's the starting point jsfiddle. I have intentionally left out the three surrounding divs since the placement in the DOM does not matter for me.
I think you need to reserve some space for left, right and bottom elements.
In my example, I am reserving 10% for the #left and #right elements, leaving the img with a width 80%. Also, reserved 10% height for the #bottom element.
Hopefully this is what you are looking for: http://jsfiddle.net/6q4Ls/2/
Drag the separators to see how the elements react.
Another solution using elements outside your container, that seems simpler:
http://jsfiddle.net/6q4Ls/5/
Edit
Using fixed size http://jsfiddle.net/6q4Ls/9/
This might not work in all browsers, as I am using the calc() function.
div.imgspace img {
position: absolute;
margin: auto;
max-width: calc(100% - 200px);
max-height: calc(100% - 100px);
top: 0; right: 100px; bottom: 100px; left: 100px;
}
Having a problem with fixed div using iPhone. I know that in iOS 5 the functionality for position:fixed has been added. My div is positioned at the top of the screen and behave pretty good, anyway, there are some bugs during scrolling.
But what actually makes me angry - it is the position of this div after coming back to the current page clicking on javascript:history.back(-1) link. The fixed div sticks in the middle of a screen. When I try to scrool, it jumps back on the right position.
Is there any cure for the bug?
PS. Sometimes the div is completely not visible after returning by history:back function. It shows up after scrolling. It seems to me a bit the same problem.
<div class='rlm fixed rlm-zindex'>
<a href='http://webiste.com/' target='_new'>
<img src='banner-960.png' class='jqwatch' border=0 />
</a>
</div>
And CSS:
div.rlm {
top: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
margin-bottom: 0;
padding-bottom: 0;
border-bottom: solid 1px;
}
div.rlm img {
width: 100%;
left: 0;
right: 0;
}
.fixed { position: fixed; }
.rlm-zindex { z-index: 5; }
Actually it seems to be a Bug!
There is a solution here, but you have to change the scrollto into onload or similar...