I'm trying to position a DIV inside another DIV on its' bottom part.
When I set the outer divs' height to some absolute height (i.e - 100px), it works fine. When It's set to percents or isn't set at all - I can't position it.
Here is my CSS:
#left_pane
{
float: left;
margin-left: 21px;
position: relative;
}
#bottom_pic_wrapper
{
position: absolute;
bottom: 0;
}
the #bottom_pic_wrapper is inside of #left_pane and should be aligned to its' bottom.
Any ideas why this won't work for me?
Thanks :)
I made one example here in jsfiddle , see if it useful to you
http://jsfiddle.net/RJXez/
let me know if you need anything else
The following code should help you position at the bottom always
var parentOffset = $('#div').offset();
var parentsHeight= $('#div').height();
var childsTopPostion= (parentOffset.top+parentsHeight) - heightOfchildDiv
$('#childdiv').css('top',childsTopPostion);
$('#childdiv').css('left',parentOffset.left);
Here is the example code to align vertically bottom inside a div
http://www.templatespoint.com/blog/2009/06/div-valign-bottom/
Related
I have this UI element that opens a tooltip/popover thing when clicked. I would like the tooltip window to appear right below the UI element, but on mobile it should be aligned to the left and right side of the viewport instead of being centered under the "more…" button.
In other words, I would like to have:
.tooltip {
top: 100%; // appear right below the button
left: 10px; // 10px *from the edge of the window*
}
Is there a way to mix referentials like this? Have the top position be calculated based on a parent, while left and right are calculated based on the viewport?
(by the way I know I can do this with JavaScript but I wanted to look for a pure CSS solution first)
The best solution I have so far is to make sure that the parent that has position: relative and acts at the referential for the absolutely positioned tooltip spans the whole width of the viewport. This works but it means the tooltip can't just be a drop-in component that can be added anywhere in your app, which is what I was trying to achieve.
It’s possible with an extra parent element around the tooltip to position it vertically.
Working demo: https://codepen.io/paweldecowski/pen/vYXaXvN
<span>Anchor
<div class="tooltip-parent">
<div class="tooltip">Tooltip</div>
</div>
</span>
.tooltip-parent {
position: absolute;
left: 0;
right: 0;
}
.tooltip {
left: 10px;
position: relative;
}
Edit:
Actually, this will work without the parent element, too. Just position the tooltip absolutely:
.tooltip {
left: 10px;
position: absolute;
}
The tooltip will by default stick to the bottom of the anchor. Of course, you won’t be able to use top or bottom properties because they will be relative to the viewport, but you can adjust the vertical position with margin.
Fiddle: http://jsfiddle.net/EzuTT/
CSS
#bottomfadebar {
position:fixed;
z-index: 2;
bottom: 0px;
width:267px;
height:84px;
background-color:#666;
}
#content{
width:2000px;
background-color:#ccc;
}
HTML
<div id="content">
This is all of the data. Theres lots of it. so the user will have to scroll horizontally. the bottom bar should go out of view as you scroll further to the right because there's so much data. the bottom bar should only stay "fixed" to the bottom, not to the left hand corner.
</div>
<div id="bottomfadebar">
THIS SHOULD SCROLL HORIZONALLY AS THE PAGE DOES
</div>
Ultimately, the #bottomfadebar div continues to stick in the bottom-left hand corner as you scroll to the right to see more of the content div. I'm trying to figure out how to allow the bottomfadebar DIV to scroll off to the left of the screen, but still fix at the bottom of the window as it's currently doing.
------EDIT!!!
Ok, so I kinda blew it on this because I thought it would be easily explained but then I realized the absolute factor would come in. It actually should reside inside of a NAV div thats centered.
http://jsfiddle.net/u5GuG/4/
It DOES need to stick to the absolute left:0 inside the "container" area....I should have specified, I apologize. Not sure how to do that.
I would use a little jQuery for that, if you don't mind ;)
$(window).scroll(function() {
$("#bottomfadebar").css("left", (-1 * $(window).scrollLeft()) + "px");
});
Fiddle: http://jsfiddle.net/inti/Gqpmf/
Update: now I think I got it, you want the #bottomfadebar to scroll along the bottom of the screen while you scroll the page.
$(window).scroll(function() {
var window_width = $(window).width(),
window_scrollleft = $(window).scrollLeft(),
content_width = $("#content").width(),
bottomfadebar_width = $("#bottomfadebar").width(),
content_path = content_width - window_width,
bottomfadebar_path = window_width - bottomfadebar_width,
bottomfadebar_left = 0;
// Equations:
// content_pos = window_scrollleft / content_path;
// bottomfadebar_pos = bottomfadebar_left / bottomfadebar_path;
// content_pos = bottomfadebar_pos;
bottomfadebar_left = window_scrollleft / content_path * bottomfadebar_path;
$("#bottomfadebar").css("left", bottomfadebar_left + "px");
});
Fiddle: http://jsfiddle.net/inti/Gqpmf/2/
Update 2: I think I still donn't get it, but if you want it to stick to the [bottom,center] screen position, then this css is a go:
#object {
position: fixed;
bottom: 0;
left: 50%;
width: 200px;
margin-left: -100px; /* half of the width in negative */
}
Fiddle: http://jsfiddle.net/inti/Gqpmf/3/
Update 3: really my last guess. If you want an item to be absolute positioned inside another element and relative to it, you have to set the container element's position to relative (or absolute).
#container {
position: realtive;
}
#object { /* inside #container */
position: absolute;
left: 0; /* will stick to the left side of #container */
bottom: 0; /* will stick to the bottom side of #container */
}
I modified the code in your Fiddle.
I moved bottomfadebar inside of content, change the height of content to 100% and changed the bottomfadebar to absolute
http://jsfiddle.net/EzuTT/1/ - Is that what you are looking for?
Just switch bottomfadebar position to 'absolute'. As you already have 'bottom:0' set it will stick to the bottom of the page. It will not remain visible when you scroll horizontally as an absolutely positioned element will default to 'left:0' unless you specify otherwise (except in older versions of IE (7 and under I think) where you may need to declare 'left:0;' to avoid odd rendering.
Instead of using fixed positioning, use absolute and set your left and bottom attributes to 0.
This will position the div at the bottom left of the page, instead of the bottom left of the browser viewport.
#bottomfadebar {
position:absolute;
z-index: 2;
left: 0;
bottom: 0;
width:267px;
height:84px;
background-color:#666;
}
Fiddle is here: http://jsfiddle.net/u5GuG/3/
It is possible to use position:absolute and left and right on the middle column to set where it ends in relation to the parent div.
However I'd like to be able to have the left side of the center div to start right where the left column ends, and for the left column to be adjustable (based on its content).
This seems like a really basic thing but from what I understand there is no way to do this without flexboxes. Is this true? Is there nothing I could do with clever nesting of semantically superfluous elements and certain styles set to auto?
If the right div has some set width (either in % or px), then yes, you can let the left div's width be defined by its content while letting the center div fill in the remaining space:
#right {
position: absolute; /* position in top right corner */
top: 0;
right: 0;
width: 80px;
}
#center {
margin-right: 80px; /* same as #right width */
}
#left {
float: left;
}
jsFiddle DEMO
From what I can tell you'd be better off with simple floated blocks. If you wanted to absolute position all of them together, you could wrap them in an absolute container, and float them inside. Maybe I just don't understand why you need them absolutely positioned, but this seems like a viable option.
I'm really not sure how to word this question, but here goes... I have a navigation bar at the top of my web page with a position of "fixed" so that it stays at the top even if I scroll down. However, I have a box that will hold all of my text/blogs that overlaps with this navigation bar whenever I scroll down.
Is there a way to "delete" a few pixels of the box (the one that holds all of my stuff) so that the navigation bar never overlaps with it? I'm sorry if this is confusing, but like I said, I'm not sure how to word it.
Screenshots:
When I'm not scrolled down-
When I am (overlapping)-
So I want to get rid of the overlapped area of my content container (and maybe 5px below it).
The other answers are spot on. I'd check the margins, and the overflow setting.
If the div's have absolute, relative, or fixed positioning, you can also play around with the z-index.
The higher the value of the z-index, the higher up in the stack an element is. So an element with a z-index of 2 will be displayed in front of an element with a z-index of 1.
On the box that contains your main content, add a margin-top equal to the height of the navigation bar. For example, if this is your html:
<div id="navbar">...</div>
<div id="content">...</div>
Then your css would be something like this:
#navbar {
position: fixed;
top: 0;
left: 0;
height: 50px;
}
#content {
margin-top: 50px;
}
Ok, thanks for the screen shots.
#navbar_id {
position: absolute;
top: 0;
left: 0;
height: 50px;
z-index: 25;
}
#main_stuff_id {
z-index: 24;
/*other
style
rules*/
}
keep in mind the "css box model" too: http://www.w3schools.com/css/box-model.gif
It sounds like you want to enforce a margin on an element with position: fixed; set. I don't think this will work, but you could put a fixed-position container around the element which you want to actually be fixed. This container can have padding, which will then give the desired effect.
<div style="position:fixed;padding:16px;background-color:#fff;width:100%;box-sizing:border-box">
<!-- don't fix the inner element -->
<div style="background-color:red">The content you want to be fixed.</div>
</div>
Working Fiddle: http://jsfiddle.net/qtHtY/
Or if you are using position you can then use top: #px; and left: #px
I have to use a float div (the main window of my application), and I'd like to center that floated DIV based on the client's screen width. How can I accomplish that?
Right now I'm using a left:20% but that's not always centered depending on the user's screen resolution
Do you want the div to grow relative to the browser window, or to fit the content inside of it?
If the former, you can just use a percentage based width rather than pixel, and it should still center.
If the latter, don't use a float...start by setting width:auto; (I think that should make it auto-expand to fit content). Then you will need some javascript to measure the width of the DIV, set the width: css property in pixels, then measure the browser window, and center the container based on these measurements.
Sorry, I was wrong about width:auto;. I guess just float it, and then use javascript like I described above to manually set the margin-right and margin-left.
Sorry, thought up a better solution.
#float {
float:left;
margin-left:50%;
position:relative;
}
And then, using jquery,
$(document).ready(function() {
var float_width = $('#float').width();
var left_spacing = float_width / 2;
$('#float').css('left', '-' + left_spacing);
});
Forgive me if my javascript is off or doesn't quite work...I didn't test it and I'm a JS noob :)
You can try to use
.mainWindow {
margin: 0 auto;
}
then make sure the parent element is text-align: center;
I usually use an auto centered container div and then put any other containers (like your floated div) inside that container. Is there any particular reason you can't do that?
Example CSS:
#container {
width: 960px;
margin: 0 auto;
position: relative;
}
My solution is easy with css
.div{
position: absolute;
top: calc(50vw);
left: calc(50vw);
}
is code clean