resizing window and keeping div in same place - html

I have currently having issues keeping my div in the same place when the window is resized. In the example, it is .add div. The issue I am having is that it is going above the view region of the page, and I can't scroll to that portion of the page so I can't even see that when I resize.
Here is the code.
http://jsbin.com/kazizeruxi/1/
This is the part that I have tried dealing with
<div class = "add" align = "center">
<!--Everything inbetween -->
</div>
Ideally I am trying to keep the entry (in the farthest up left) to stay in the upper left no matter how it is resized.
I have tried messing around with media queries, but to no avail. It just turned out to be very inefficient with different browser sizes.
Any suggestions?

Just give them a absolute position.
.add {
position: absolute;
}

The proper way to do that is to give your element the position : fixed then it will have a fixed position from the root element or the body not the parent.
let us say you want it to be centered on the screen you can use this
.add{
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0)
}
of if you have a fixed with and height you can use margin instead of transform
.add{
position: fixed;
top: 50%;
left: 50%;
margin: -50% 0 0 -50%
}
if you give it an position: absolute and the parent has a position: relaive then it will move with the parent element on resize

Related

how is the sidebar sticking to the bottom of the page in this bootstrap template?

I don't really understand how they are making this sidebar stick to the bottom of the page in this bootstrap template.
http://getbootstrap.com/examples/dashboard/#
If you look at the .sidebar class CSS properties, there is this weird
position: fixed; top: 51px; bottom: 0px;
But really no rule about the height of the column, and since it should automatically adjust to the height of the content, I'm a bit lost here.
I made an attempt with this CodePen :
http://codepen.io/anon/pen/ojQvjj
but really, the only way I found to make the sidebar stick to the bottom was to add a height property.
Thanks a lot for the answers, it will really help me make progress with CSS.
If you make a container or element (.sidebar) with position: fixed; + top: 0; bottom: 0; That container will 'stick' to the top and bottom of the parent element (body).
When you use a 'fixed navbar' in bootstrap, you need to add a margin-top > 50px or, in this case,top: 51px; so the sidebar starts after the navbar and it's not hiding behind it.
At some point it will overflow, that's why they add, overflow-y: hidden or scroll;
To be clearer. If you remove those .col-sm-3 .col-md-2 from that element, and give the .sidebar a left: 0; right: 0; it will take the whole viewport area.
Here if you see the code col-md-2 in first div and col-md-10 in second div and making first div as position: fixed; and when we make a div as position fixed it don't acquire any space in view port. and second div with col-md-10 will acquire that place but it will be hidden behind top position of first div so we use .col-md-offset-2 to move second div to 16.66 % right direction and top:0 and bottom:0 for giving position to a fixed div.
and whatever you want is there: please check you this codepen:
http://codepen.io/Gkakar/pen/KdrzBJ

Fixed vs. absolute

So I've checked the site and I've seen questions close to what I am looking for but not exactly the same.
I am trying to figure out how to position an element so that when scrolled (up / down) the position is fixed, but when the browser is resize (left / right) the position is absolute or relative.
Essentially I want to place an element 10% (for example) from the top left of the browser window and have it stay there on scroll /window resize.
if what you want is always fixed in some position even if the browser is scrolled / resized, you may try this for your css
.fixedelement {
position: fixed;
top: 10%;
left: 10%;
width: 80%; /*my example*/
height: 10%;
}

How to place object in relation to window browser in css/html?

How do I place an object in css to move in relation to the size of the window browser?
I tried the following types of positioning: Fixed, Absolute, and Relative. The problem I have with these are that when ever I change the size of the window browser, it stays in the same exact spot and does not move with the browser size.
Thanks in advance for the help!
You must be defining top, bottom, left, right using px, so you need to use % instead
Demo
<div class="hello">
Whatever
<div>
.hello {
position: absolute;
top: 50%;
left: 50%;
}
Make sure if you are using absolute position, than wrap it inside a relative positioned container, so that it doesn't flow out in the wild
Without any information I'm going to assume your using pixels as your top and left? What you may want to try is:
.my-class {
position: absolute;
top: 20%;
left: 20%;
}
You can also position based on specific sizes using #media queries in css

What is the cleanest way to center a div absolutely (H+V) inside a browser window?

I need to build a webpage of just a humble content (a logo and some text) to be show in the center of a browser window. How do I best achieve this effect targeting today web browsers?
Here's a very simple solution. I take no credit for this:
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm
Works very well for a simple body > div situation like yours.
Your other option, although I fear the repercussions from some table-haters around here, is you could wrap the div in a table, and using the vertical-align:middle property on it to take care of the vertical align without javascript. Then use margin: 0 auto; on the div to handle the horizontal center.
If you know the dimensions of the element (do the math for the values):
position: absolute;
left: 50%;
top: 50%;
width: ($WIDTH)px;
height: ($HEIGHT)px;
margin: (-$HEIGHT/2)px 0 0 (-$WIDTH/2)px;
What it does it positions the top left corner of the element at the center of the viewport and then uses negative margins to inch the center point to the center of the viewport.
you can put your content inside a div and provide height & width to this div then apply this simple css like u applied width as 300px & height as 300px::
div {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}
then it'll always be in center and make sure u used a valid DOCTYPE.

<div> position:absolute; bottom: 0; not working as expected in IE7

My site, a course catalog tool for universities, has a center pane that contains a dynamically updated list of classes. In Firefox, Opera, and Chrome, the center pane has the intended scrolling behavior: when the class list exceeds the height, the center pane has a scroll bar. IE, however, only shows this bar when the height is explicitly set. Without using JavaScript to reset the center pane height on resize, how can I force Internet Explorer to show the scroll bar?
The center pane:
<div id="middlenav">
<div id="middleheader"></div>
<div id="courselist"></div>
</div>
and its CSS:
div#middlenav {
position: absolute;
left: 250px;
right: 350px;
top: 0px;
bottom: 0px;
}
div#courselist {
overflow: auto;
position: absolute;
top: 55px;
bottom: 0px;
width: 100%;
}
It looks like the center pane isn't obeying the bottom: 0px; statement, and is expanding to the full height of the contained #courselist. I tried body { height: 100% } but that didn't fix it either.
"The top property overrides the bottom property..."
https://developer.mozilla.org/en-US/docs/CSS/bottom
Change top to auto instead of 0px:
div#middlenav
{
position: absolute;
left: 250px;
right: 350px;
top: auto;
bottom: 0px;
}
That should fix the bottom positioning. Remember, if #middlenav is positioned absolutely, it will be relative to whichever parent element has position:absolute; or position:relative;. If #middlenav has no parent elements that are positioned, it will be relative to <body>.
I'm not sure why you have #courselist absolutely positioned; since it is inside of #middlenav I would think you could leave it static or position it relatively. But regardless of what you do, I think you need a height set on #courselist or #middlenav. The default value of height is auto, so there won't be a scrollbar because the element will expand to fit its content.
I know this question was asked 3 years ago, but I'm posting this for other people who may have a problem with CSS positioning. Cheers!
While it is perfectly acceptable to set opposite edges when using absolute positioning in CSS, limitations in Internet Explorer mean that the approach may not work there.
There is no way to avoid the bug in Internet Explorer 6. In Internet Explorer 7 and newer, triggering Standards Mode will resolve the issue.
Faking columns that extend to the bottom of an element is usually achieved using faux columns.
position: absolute; bottom: 0px; sets the element right on the bottom of the element. But it has to know where the bottom of the element is. If you set the height to 100% or have it in another element positioned bottom: 0px; Then it doesn't know where the bottom is, unless one of those elements is inside (taking up the full height of) and element with a fixed size. You can't give the body a height of 100% because it would just sort of go on forever. Try specifying the height of the body or some containing element. :D
Ensure that your doctype is set to HTML strict, otherwise IE will behave quirky and get confused with among others positioning and overflows.
Add this to top of your page:
<!DOCTYPE html>
I am not quite sure if i fully understand but I think you want the center pane to scroll when it reaches past a certain height..this is how I would do it.
#middlenav { position:absolute; left:250px; top:0 }
#courselist { position: absolute;top: 55px; left:0; min-height:400px; _height:400px;
overflow:scroll; overflow-x:hidden; width:500px; }
This sets your course list in all browsers to a minimum height of 400, once that is passed a scrollbar appears. min-height is not supported in IE7 and lower so i used the IE hack _height 400 so it acts as a min height. overflow-x:hidden is hiding the horizontal scroll just in case you only want vertical. I hope this helps you.
Don't use top and bottom positioning in the same class and don't use right and left positioning in the same class, as they are contradictory values to each other.