We Keep Coding

How to dynamically change element alignment?

What I am trying to do:
I am creating a page footer using html, css, and bootstrap. When the page is open on a desktop, it looks like this (which is what I want):
But when the web page reaches the minimum width, it looks like this:
However, I would like it to look something like this when the web page has been decreased to the minimum width:
Problem/ What I tried:
So, I am have trouble with two things.
Problem 1: I can't seem to find a solution where I can get both the images and the text to center once there is no more room for them to be side by side.
Problem 2: I can't find a solution where I keep the size of the black jumbotron the same and that keeps the text from flowing out the bottom of it.
I tried creating a table (with text in place of the images to test it). I thought if I put the elements in a table with the images centered in the far left column and the text centered in the far left column, then, when the table got small enough, the columns would stack and the elements would be centered. But I couldn't get that to work.
I also tried adding two smaller jumbotrons within the larger one. One that holds the images and another that holds the text. But I still couldn't get the images to center properly, and there is still an issue with the text flowing out the bottom of the black jumbotron.
What am I doing wrong, and how can I do what I am trying to do using CSS and HTML? If Javascript is the only solution, I don't mind trying that, I just don't use it much.
Code:
Here is my HTML:
<div class="container">
<div class = "grid">
<div class="row">
<div class="jumbotron" id="footerJumbotron">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
Here is my CSS:
#facebookLogo{
float:left;
width:30px;
height:30px;
margin:5px;
}
#twitterLogo{
float:left;
width:40px;
height:30px;
margin:5px;
}
#youtubeLogo{
float:left;
width:40px;
height:25px;
margin:5px;
}
#footerFont{
float:right;
color:white;
font-size:10px;
padding-top:10px;padding-bottom:10px; text-align:right;
}
#footerJumbotron{
background-color:black;border-radius: 0 !important;
height:100px !important;padding-top:30px;
}

You can do this with bootstrap grid and media queries DEMO
#media(min-width: 768px) {
.custom-row p {
text-align: right;
}
}
#media(max-width: 768px) {
.custom-row {
text-align: center;
}
}

something i sorted out that can then be worked on.
http://codepen.io/simondavies/pen/jqjgxL
HTML
<footer>
<div class="footer-social-wrapper">
<div class="social-wrapper">
<div class="social-icons"><div class="facebook"></div></div>
<div class="social-icons"><div class="twitter"></div></div>
<div class="social-icons"><div class="youtube"></div></div>
</div>
</div>
<div class="footer-copy">
<p>© 2016 Company Name. All Rights Reserved.</p>
</div>
</footer>
CSS:
body {margin:0;padding:0;}
footer,
.social-wrapper {
margin: 0 auto;
padding: 0;
width: 100%;
height: auto;
position: relative;
height: 50px;
}
footer:before,
.social-wrapper:before,
footer:after,
.social-wrapper:after { content: " "; display: table;}
footer:after,
.social-wrapper:after {clear: both;}
.footer-social-wrapper {
margin:0;
padding: 0;
position: relative;
float: left;
width: 30%;
}
.footer-copy {
margin:0;
padding:0;
position: relative;
float: left;
width: 70%;
height: 50px;
}
.footer-copy {
text-align: right;
}
.social-wrapper .social-icons {
margin: 0px;
position: relative;
float: left;
width: 33.333%;
height: auto;
}
.social-wrapper .social-icons .facebook {
margin: 0 auto;
background:blue;
width: 40px;
height: 40px;
}
.social-wrapper .social-icons .twitter {
margin: 0 auto;
background: red;
width: 40px;
height: 40px;
}
.social-wrapper .social-icons .youtube {
margin: 0 auto;
background: yellow;
width: 40px;
height: 40px;
}
#media(max-width:700px){
.footer-social-wrapper,
.footer-copy {
margin: 0 auto;
width: 100%;
text-align: center;
}
}
without a frame work like bootstrap etc.

Inside jumbotron, create another element contentWrapper and put contents inside then add a media query for it. You need to set width and margin: auto to make it centered.
Try resizing the window width to below 800 pixels, and you will see the contents are aligned center.
#facebookLogo{
float:left;
width:30px;
height:30px;
margin:5px;
}
#twitterLogo{
float:left;
width:40px;
height:30px;
margin:5px;
}
#youtubeLogo{
float:left;
width:40px;
height:25px;
margin:5px;
}
#footerFont{
float:right;
color:white;
font-size:10px;
padding-top:10px;padding-bottom:10px; text-align:right;
}
#footerJumbotron{
background-color:black;border-radius: 0 !important;
height:100px !important;padding-top:30px;
}
#media (max-width: 800px) {
.contentWrapper{
width: 400px;
margin: auto;
}
}
<div class="container">
<div class = "grid">
<div class="row">
<div class="jumbotron" id="footerJumbotron">
<div class="contentWrapper">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
</div>

In Bootstrap 4 you can just use the responsive alignment classes, something like text-xs-center text-sm-left, Also your code is highly repetitive, consider something like this:
#footerJumbotron img {
width: 30px;
height: 30px;
margin: 5px;
}
#footerFont {
color: white;
font-size: 10px;
}
#footerJumbotron {
background-color: black;
border-radius: 0 !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="grid">
<div class="row">
<div class="container-fluid jumbotron" id="footerJumbotron">
<div class="col-sm-6 text-sm-left">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
</div>
<div class="col-sm-6 text-sm-right">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.
<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/veyytd6u/
* no need to set a fixed height if your footer is going be dynamic (in mobile when there are 2 rows, the height must change so leave it automatic)
* consider escaping the & in HTML => &

Push down the footer as content grows

I have these two illustration for the issue I need to fix:
Footer is relative and pushed down as textarea grows, but there is a
whitespace below the footer
Footer is absoluted and is just right in the bottom of the page but it is not pushed down as content (textarea) grows
The code for the footer & content is:
.content {
padding-bottom: 124px;
position: relative;
}
.footer{
width: 100%;
height:124px !important;
margin: 0px auto;
padding-top: 20px;
padding-bottom: 40px;
position: relative !important;
bottom: 0px; !important;
left: 0px;
}
The question is how can I make that the footer stays at the bottom even when the content is not full, while as content grows it should be pushed down further.

You could use the sticky footer solution from http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
.margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
with HTML
...
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
Content of footer
</div>
</body>
</html>
The only limitation is that you have to know the size of the footer

apply
overflow: auto;
to the content

You could use the calc trick that isn't so obtuous and very simple to work with, it only works in IE9 and up, though, and it requires you to know the size of your footer as well. I have added % values as well to have some semblance of logic for older browsers. This will also allow the content to expand as much as it wants.
html, body {
height: 100%;
}
body {
padding: 0;
margin: 0;
}
#content, #footer {
width: 100%;
background: whiteSmoke;
}
#content {
min-height: 90%;
min-height: calc(100% - 100px);
}
#footer {
height: 10%;
height: calc(100px);
background: #000;
}
<div id="content"></div>
<div id="footer"></div>

css position tricks for website header

please check this:
i am doing responsive web design and i have 100% with image slider. if i re-size my browser slider image height will change.
both slider and navigation wrap in my header, so i need to get header height when i responsive.
and also i need to both (navigation , and slider ) top:0px;
i think you can get some idea what i try to say.
<header>
<nav> <!-- my header main menu goes here --> </nav>
<div class="slider">
<!-- slider images goes here -->
</div>
</header>
<div class="content">
</div>
<footer>
</footer>

do this in css:
html,body{
height:100%;
}
header{
background:blue;
height: 100%;
/*padding-bottom: 120px;*/ //<---remove this
}
nav{
position:relative;
top: 0;
width: 960px;
margin: 0 auto;
z-index: 2;
background: red;
height: 50px;
}
.slider{
width:98%
position:absolute;
top: 0;
margin: 0 auto;
z-index: 1;
background: green;
height: 100%;
}
Try this

Having trouble extending divs to the bottom of the page. jsFiddle included

Having trouble extending the left and right divs to the bottom of the page, no more no less.
Here's my work.
http://jsfiddle.net/qggFz/26/
Thanks,
Dale

Here is your js solution, sir:
//Can place js in <head> tag
$(document).ready(function(){
var remHeight = $('html').height() - $('#top').height();
$('#left').css('height', remHeight);
$('#right').css('height', remHeight);
});
css:
body, html
{
height: 100%;
}
.top {
background: red;
}
.left {
width: 25%;
background: grey;
float: left;
}
.right {
width: 25%;
background: blue;
float: left;
}
html:
<html>
<body>
<div id="top" class="top">
<div id="msg">hello</div>
</div>
<div id="left" class="left">
left
</div>
<div id="right" class="right">
right
</div>
</body>
</html>
http://jsfiddle.net/zTEhB/

Check: http://jsfiddle.net/5gqNn/
You need to specify the height of the root element.
Reference:
https://developer.mozilla.org/en/CSS/height
The is calculated with respect to the height of the
containing block. If the height of the containing block is not
specified explicitly, the value computes to auto. A percentage height
on the root element (e.g. ) is relative to the viewport.

You have to say that the body and html tags are also 100% like this:
html, body{
height:100%;
position: relative;}
.top {
background: red;
}
.left {
position: relative;
width: 25%;
height: 100%;
background: grey;
float: left;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%;
}
.right {
position: relative;
width: 25%;
height: 100%;
background: blue;
float: left;
}

Why doesn't my sticky footer stick?

I've browsed to all question related to "sticky footer" and nothing helped me because my #content div does not always have sufficient content to push the footer to the bottom. Here is the code I've used to achieve this, but apparently I did something wrong:
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
margin-top: -45px;
padding-top:15px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
}
<div id="container">
<div id="index_body">
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
Some of my attempts work when index body has loads of text images only then the footer goes to the end but when it doesn't have much content let say 2 paragraph tags and an image the footer doesn't stick. Maybe this is not possible with just CSS, because the index_footer height is not fixed? Is there a way to do this with JavaScript? Or what is the right way to do this?
My screen resolution is really big maybe that is the problem its 1680 x 1050

Try moving your footer div outside of the container div. Your technique should then work. The way you have it set at the moment the footer is within the containing div, but positioned relatively. So even though the containing div may have 100% height, the footer div within it is still only to go just below the content in the container.
A quick example of what I mean, (note that an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>
If you can't move the footer outside of the container (for whatever reason), then you could also try positioning the footer absolutely within the containing div to be at the bottom. position: absolute; bottom: 0px; etc
For example, (again, an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test 2</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
position: relative;
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</div>
</body>
</html>

I know this doesn't answer your exact question, but the work done by Ryan Fait has worked very well for me across multiple browsers. You might want to give this a try (or take a look at what he did compared to what you are doing and see if you can determine a fix).

I believe the root of the problem is that the footer element in the HTML needs to be outside of the #container div. Also, I noticed after I removed that, issues with margin and padding on the body tag. Finally, the border-top on the .footer makes the height of the footer 46px, not 45px...
The corrected CSS:
/* FOOTER FIX */
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
body{margin:0;padding:0;}
#container{ margin-bottom: -46px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
padding-top:15px;
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
The corrected HTML:
<html>
<body>
<div id="container">
<div id="index_body">
</div><!--end index_body -->
</div><!--end container -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</body>
</html>

It's actually easy, here's the minimum required template:
<!doctype html>
<html lang="en">
<head>
<title>SO question 1980857</title>
<style>
html, body {
margin: 0;
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%; /* This is min-height for IE6. */
}
#footer {
position: absolute;
bottom: 0;
}
#footer, #pushfooter {
height: 50px; /* Both must have the same height. */
}
</style>
</head>
<body>
<div id="container">
<div id="content">Content</div>
<div id="pushfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Making the container relative and giving it a min-height will actually stick the footer to its bottom all the time regardless of the content's actual height, which was your major concern as understood from comments.

Going off Harmen, i have tested this and it works, with the footer in the container. altho it is a little hackish
CSS
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body {
min-height: 100%;
margin-bottom: -46px;
}
.footer, .push {
height: 30px;
}
.footer {
clear: both;
position: relative;
z-index: 10;
margin: 0px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
html
<body>
<div id="container">
<div id="index_body">
<div class="push"></div><!--Used to force the footer down to avoid overlap of footer and text -->
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
</body>

In order to realize a sticky footer, that is a footer placed in a fixed position at the bottom of the webpage that doesn't move when your scroll the page you can use this css code:
#footer{
position:fixed;
clear:both;
}
position:fixed makes the footer sticky anyway there could be floating problems if you used float:left or float:right in your code before, so using also clear:both it clears the floating and ensures that the footer is at the bottom under other divs and not on the left or right of the precedent div.

This will work, no matter what the height of the #container is:
CSS:
html, body {
height: 100%;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -50px;
position: relative;
}
#index_footer {
height: 50px;
line-height: 50px;
position: relative;
background: #CCC;
}
#push {
height: 50px;
}
HTML:
<div id="container">
<div id="index_body">
test
</div>
<div id="push"> </div>
</div>
<div id="index_footer" class="footer">
test
</div>