I have the following Bootstrap based code:
<div id="sidebar-wrapper" class="collapse sidebar-collapse">
<nav id="sidebar">
<ul id="main-nav" class="open-active">
....
</ul>
</nav>
</div>
Here is the CSS for #sidebar:
#sidebar {
width: 100%;
float: none;
position: static;
}
This creates a nice sidebar that stretches from top to bottom. However, I can't seem to figure out how to add a div that rests at the very bottom of the sidebar.
A screenshot of what I mean:
Here is the code for that Test Div in the screenshot:
<div style="position: absolute; bottom: 0;">
Test Div
</div>
If the sidebar fills up 100% of the page's height, you can create a wrapper that is absolute positioned in the sidebar with the bottom property set to 0px.
This should look something like this:
.wrapper {
position: absolute;
bottom: 0;
}
And it's straight from this example. As another commenter already pointed out, you might have to change the static positioning of the parent #sidebar element.
To my knowledge this would be the only non-Javascript approach, but it will only work if the sidebar is at 100%.
Notable alternative option using JavaScript:
Let's say you know the heights of all the elements you are working with. You could then simply adjust the margin-top property of div element to be placed at the bottom.
This would look something like this:
window.onload = function() {
var header = document.getElementById("heading");
var bottom = document.getElementById("bottom");
var height = document.body.scrollHeight;
bottom.style.marginTop = (height - header.clientHeight) + 'px';
}
I hope this helps!
Edit:
Now that I think about this more, this is a perfect use case for the calc() CSS3 function. You might want to check it out.
Using this has a few caveats, like if you don't know the height of the content in the bottom-positioned div 100% of the time or if you care about cross-compatibitly problems (although I would say it has pretty good support).
This code would look something like this:
.bottom {
/* should be moved down a distance equal to the height of
parent container minus the height of the bottom div
and the div above it */
margin-top: calc(100% - (20px + 40px));
}
Check out these neat use cases to see if this is an option you would want to consider exploring further.
Try adding your div within the sidebar, and for your CSS put:
.div {
position: absolute;
bottom: 0;
}
You can't change #sidebar to position:relative? That should make the absolute positioning work.
Related
I am working on a project for a class and have an issue.
The site can be found here: http://ispace.ci.fsu.edu/~seb10/cgs2821/proj10
What I have now is a div that I have positioned towards the bottom using inline styling in the HTML and a div.
It appears fine right now, but of course that depends on the browser that is being used.
I would like that image to always appear at the bottom without having to use inline styling. Essentially, I would like it to stick out of the footer, but not have anything else be affected or moved.
What would be the process to do this, if it is possible?
Here's a link to the CSS: http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/style.css
Thank you very much for the help in advance.
I assume that the oil well tower image is the one to be positioned. I would create a .png file with a transparent background and then set it as background image to the .container element.
The .png transparency will allow the other background motif to show through in the open spaces (transparent) sections of your vector image.
This works fine as long as your footer elements flows right after your container element.
The key is place the image with position absolute. I have moved the mast illustration to the footer: http://jsfiddle.net/David_Knowles/98PLA/
Does this solve your problem?
#footer .container {overflow: visible;} /* use a different technique to wrap floated elements so you can place image in the footer and have it stick out - see underneath */
.fltright {position: absolute; bottom: 56px; right: 0;}
/* For modern browsers */
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
/* For IE 6-7 (trigger hasLayout) */
.container {
zoom:1;
}
<div id="footer">
<!-- Begin Container -->
<div class="container">
<img class="fltright" src='http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/images/derrick.png' alt="derrick" width="300"/>
<h1>Copyright © 2013 <br />All Rights Reserved</h1>
<h3>Webmaster |Site Map | About</h3>
</div>
<!-- End Container -->
</div>
<!-- End Footer -->
To make an image ignore it's parent element, a combination of positioning and z-index can be used:
position: absolute;
z-index: 2;
You can also try playing around with the display and overflow properties depending on exactly what you want it to look like.
When I looked at your code, I came up with these css values to absolutely align your .sidebar on your page. You had position: relative; to position it, however, it moves relative to how the large the window is and the surrounding elements. This is why it was probably moving around. However, position: absolute; does not consider surrounding elements and therefore will stay put.
.sidebar {
position: absolute;
top: 233px;
right: 10px;
}
I have three divs. The two smaller ones are inside the same container, the third div.
The first child div is 350x350 px big.
The third div is 89% of another container div, meaning I dont know the size of it.
I want to make the second child div span between the edges of the first child div and the container div.
Basically:
<div id="container">
<div id="first_child" style="width:350px; height:350px;"> </div>
<div id="second_child" style="width:???px; height:350px;"> </div>
</div>
How do I figure out the width of my second_child element if I want the second_child element to span precisely between the first_child element and the edge of container?
Edit:
Uploaded a quickly drawn image. The big black square is container, measurements are unknown. The red box is first_child, the blue box is second_child. I want to find the width for second_child so it will stretch from the end of first_child to the right edge of container.
You can do using CSS calc():
#second_child {
width: -moz-calc(100% - 350px);
width: -webkit-calc(100% - 350px);
width: calc(100% - 350px);
}
For IE8 and lower you'll have to use jQuery or javascript
I think what you need is to use some css like so:
#container {
width:89%;
height:350px;
}
#first_child {
float:left;
width:350px;
height:350px;
}
#second_child {
height:350px;
margin-left:350px;
}
Here is a working example (with added styles to see the effect)
A good answer with pure CSS was given above, so I'll just answer the question of "how do I find the width needed?" in javascript.
// This is assuming there is no padding.
totalWidth = document.getElementById('container').offsetWidth;
firstChildWidth = document.getElementById('first_child').offsetWidth;
document.getElementById('second_child').style.width = (totalWidth - firstChildWidth) + 'px';
Using jQuery:
var containerWidth = $('#container').width();
$('#second_child').width(containerWidth - 350);
You can do that with pure css positioning, since you know how big the first child is:
#container {
position:relative
}
#first_child {
width:350px;
height:350px
}
#second_child {
height:350px;
position:absolute;
top: 0;
left:350px;
right:0;
}
Note that the container div has position:relative. This is necessary to make position:absolute use the top left corner of the container div instead of the body.
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/
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