We Keep Coding

CSS/HTML - Floating DIV when I scroll issue

I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/

try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example

non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN

Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}

Centering my site in html

I was wondering if i could do something similiar to this site (http://www.viralnova.com/hasnt-bathed-60-years-gallery/?mb=sk&Skyid=815). This site has a background then on top of the background their is a clump of content. As you slide the page back and forth the content stays centered, unless you slide the page to the very left. At this point the page stops adjusting and just stays put on the left. I was wondering if their was something to put this effect on my site. Should i make my site content inside a specific div then tell that div to center?
Sorry if my question is confusing.
-thanks

You can wrap your content like following code
<div class="wraper">
<div class="content"></div>
</div>
set the width to the wrapper and margin auto to left and right of the wraper
.wraper {
display:block;
width:200px; <-- define a width
height: 100px;
margin: 10px auto; <-- set margin left and right to auto
background: yellow;
}
Demo

HTML and CSS in order to fix footer content of a website

Can anyone teach me how to create a footer div which is always stay at the bottom of the website regardless of how much information is present in the middle and the most important thing here is that I'm not fixed any height property for the middle content(Please notice that is "website" not "window" because I don't want to fixed the footer that force the user always see the footer whenever they scroll up or scroll down in my website) A specific example is like Facebook that footer always at the end of the page no matter how many times you click older post button. Is there anyway possible in HTML and CSS or even javascript to do that. Please help me and thank you so much in advanced!

I've used stickyfooter in the past. You can learn it here http://ryanfait.com/sticky-footer/

You put the footer content after the other content. That's all.
(Unless you need to deal with earlier content that is positioned out of normal flow, is floating, etc).

One way is to use a master page with the footer div in it. Please take a look at this MSDN article for more info: http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx

If you want the footer to be pushed down to the bottom of the window if the content isn't high enough to fill the window, use the technique offered in this article.
To summarize the article:
Create a wrapper around the page elements:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
Using CSS, give the body 100% height and give the container position:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
Again using CSS, give the content (in this example, #body), a padding-bottom with the height of the footer and position the footer absolutely at bottom: 0:
#body {
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
}
It's important that the footer has a fixed height (i.e. in px or em).
You can see a demonstration of this technique here: http://jsfiddle.net/PPvG/F7Fph/

trying to scale jquery panel toggler with position:absolute to my webpage

I used position:absolute; so that when you click the tab "Send this page to your email", at the top, the panel goes down and goes over the content underneath instead of pushing them down. However, using absolute position means that the tab will move to the left when you zoom in or move to the right when you zoom out. It just doesn't look right when you zoom in or out. I want the tab to "go inwards" when you zoom out and not have it "slide". Is it possible to keep the tab from "sliding" and line it up with panel that slides out?
Here's my page with the tab: http://coroomer.com/apartments/ztestpage/index.php

Since you're using absolute positioning, you don't need to bother with javascript/jQuery. You can just modify your HTML/CSS as follows:
Move this:
<p align="center" class="flip" id="toggle">Send this page to your email.</p>
so that it's the first child of this:
<div style="float: right; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" 500px="" height:="" id="map_canvas" class="map">
In the above div (id="map_canvas"), set overflow to "visible". Then set #toggle's CSS as follows (tweak values to suit your needs):
#toggle {
font-family: segoe ui;
left: 100px;
top: -44px;
}
If you don't want to go that route (but you really should), you'd have to write a function that fires on window.onresize which sets the #toggle element's position relative to whatever element of your choosing.

you should use another div with fixed width and set it's position to relative, then when you put this div with aboslute positioning into this relative positioned div it won't move with page resizing

Can the content remain centered while the screen size changes?

First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?

You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.

I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37

A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.