I have an HTML div positioned at a certain point (position: absolute; top: ...; left: ...). How do I make the div span from that point over to the edge of the page, and scale as the window is resized? I.e. - the same behavior as for width: 100%, but with the top left corner of the div at a specific, arbitrary point.
If the element is absolutely positioned, you can assign it's top, left, bottom and right properties:
<html>
<head>
<style>
#foo{
position: absolute;
top: 10px;
left: 10px;
bottom: 0;
right: 0;
background-color: red;
border: 5px solid blue;
}
</style>
</head>
<body>
<div id="foo"></div>
</body>
</html>
if i understand the question correctly, this should work
div {
position: absolute;
left: 100px; << "left top corner of the div at a specific, arbitrary point."
top: 0;
bottom: 0;
right: 0;
background-color: #666;
}
Related
I have a position: fixed element. It has some top and left properties but it was not visible in the screen. After some debugging I found that it was positioned way off than it should be. So I set top: 0 and left: 0 and now that element was where I wanted it to be (near middle bottom) instead of being in the top-left of the screen as it should be.
Why is this happening? One thing is that it's parent container also has position fixed. I'll have a snippet below
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
<div class="container">
<div class="child">Test</div>
</div>
The reason there is a fixed component inside another fixed is that one is container and the other is kind of a tooltip so it has to be that way.
left and top properties should have some units associated with it, e.g. pixels. Try the following:
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
Got the answer. It's a bug in chrome where a child with fixed position doesn't work if any parent has transform: translate css.
Duplicate of this question
I want to make a message box at the lower left corner of the browser window. I want the div to remain stuck to the lower left corner. So if I make the browser smaller it will not disappear. Here is the jsfiddle I am working with. But it's not working. How can it be done in css? Here is my css code:
#lowerleft
{
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
}
Take a look at position; in this case position: fixed; bottom: 0;
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
#lowerleft
{
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
position: fixed;
bottom: 0;
}
<div id="lowerleft">
I am stuck to lower left border of browser. And I am stuck at the top of lower boundary of te browser.
</diV>
#lowerleft
{
position:fixed;
bottom:0;
left:0;
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
}
Jsfiddle Demo
To your css add this:
position: absolute;
bottom: 0px;
left: 0px;
JSFiddle
Use absolute positioning (syntax example below):
#lowerleft {
position: absolute;
left: 0; bottom: 0;
}
What you are currently doing is modifying the margin of the element. This only has an effect on the elements surrounding the subject.
Using absolute positioning places the subject div on top of everything else, having no effect on surrounding elements.
Find out about absolute positioning from the w3Schools site here.
I am trying to center an image of a phone vertically. The code I have to far works but if I decrease the window height the phone image will overlap the header. What I want to do is center the phone image vertically between the bottom of the header and the bottom of the window and stay there no matter how tall the window is (but not overlap the header).
Link to jsfiddle: jsfiddle.net/#&togetherjs=zAMDokl6RG.
Having lots of issues with this. Could someone give me some pointers on how to do this please? Thanks :
css:
* {
margin: 0;
padding: 0;
/* To keep our header correct */
}
#header {
background: #e9e6e6;
/* Here set your colour */
height: 55px;
width: 100%;
top: 0;
left: 0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}
.innerdiv {
position: absolute;
bottom: 0;
right: 0;
padding: 0px 0px;
z-index: -2;
}
.dllogodiv {
position: absolute;
top: 0;
right: 0;
padding: 5px 5px;
}
.centeredImage {
text-align: center;
display: block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<div id="header">My header</div>
</div>
<div class="innerdiv">
<img class="imageCorner" src="http://s4.postimg.org/tyfx93u8p/logo.png">
</div>
<p class="centeredImage">
<img src="http://s4.postimg.org/p12cnzs9l/slide1.png">
</p>
heres a fiddle I put together
the idea is to have a top/middle/bottom. There is a css calc property you can use to calculate something, like height. Assuming you know what the height of your image is (lets say 200px), you can do:
top: calc(50% - 100px);
this will make the top of your image 50% from the top, minus half the size of the image, so that the middle of the image is 50% from the top.
of course, you have to set the middle section to position relative or absolute, and make the image position absolute inside.
This is just one quick way, there are other ways. Then again, usually you want to center something within a div, not the whole page.
I'm looking for a CSS trick to fix ie8.
In the sample, i put a code to make two distinct column 'content' and 'menu'.
My problem on ie8 is that i have to change margin-left of content to 140px. < (If i don't do this, i don't get a correct margin on ie and content is on menu.)
But the div width doesn't change and that make a scrool bar on y axes that i don't want.
On others browsers, that make the job without specife the width and auto-width alone.
HTML :
<div class="menu">
Menu
</div>
<div class="content">
Content
</div>
CSS:
.menu {
width: 110px;
position: absolute;
top: 60px;
bottom: 0;
left: 0;
border: 1px solid red;
}
.content {
margin-left:110px;
border: 1px solid blue;
}
Any idea? Thanks!
JSFIDDLE
Here my fix for ie8
.l-content {
position: absolute;
top: 60px;
bottom: 0;
left: 5px;
right: 10px;
}
Absolute: Ignores flow completely.
Relative: Is within context of normal flow, but can be moved around too.
This displays a green box within a red box as expected.
<html>
<head>
<title>Lets see what occurs</title>
<style>
#box_1 {
position: absolute;
top: 100px;
left: 100px;
right: 0px;
bottom: 0px;
background:red;
}
#box_2 {
position: absolute;
top: 100px;
bottom: 100px;
left: 40px;
right: 0px;
background:green;
}
</style>
</head>
<body>
<div id="box_1"><div id="box_2"></div></div>
</body>
</html>
How come this fails to do the same?
<html>
<head>
<title>Lets see what occurs</title>
<style>
#box_1 {
position: absolute;
top: 100px;
left: 100px;
right: 0px;
bottom: 0px;
background:red;
}
#box_2 {
position: relative;
top: 100px;
bottom: 100px;
left: 40px;
right: 0px;
background:green;
}
</style>
</head>
<body>
<div id="box_1"><div id="box_2"></div></div>
</body>
</html>
Relative position:
Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.
Absolute position:
With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.
absolute positioning is referenced to the parent/ancestor that has absolute or relative positioning. relative positioning is referenced to himself, that's it, to its supposed place in the page flow. So when you position an absolute div inside another absolute div, the left/top/etc. references are about the parent's borders; when you position the child div like relative, it takes reference about his own borders, in the place it was supposed to be.
Here you can read a good article about it: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
The problem is not using relative positioning inside an absolutely positioned div, it's that you're setting values for every edge (top, right, bottom and left), and your elements have no defined widths. When you set values for every edge, it will attempt to position your element to each of those values which will produce unexpected results.
The following:
#box_1 {
position: absolute;
top: 100px;
bottom: 0;
left: 50px;
right: 0;
}
Should be more like:
#box_1 {
position: absolute;
top: 100px;
left: 50px;
}
Look at this fiddle to see the positioning working as expected when I remove two unnecessary position values and add width/height: http://jsfiddle.net/S4fvs/9/
Sometimes you want to take up the entire window, so setting top: 0, right: 0, bottom: 0 and left: 0 will cause a block level element to fill all available space. That's useful for creating a new context on top of your normal content, say for a modal that might get long and scroll without scrolling the page behind it.