Placing a banner at the bottom of a web site pushing all elements up










0














I’m trying to add a JavaScript component that should be added and work on various sites. My code adds a rectangle at the bottom of the site using a div with position:fixed.
On some sites, there are already some elements at the bottom of the screen, which also use position:fixed.
I would like to identify those elements and raise them up. So that both elements will be visible.
Another alternative would be to raise the whole site up and place my div at the bottom.



Does anyone have an idea, how this can be done in JavaScript/css configuration?



I've created a sample code which is similar to what I do to add the banner at the bottom of the site: http://jsfiddle.net/bp0yk7cv/8



var div = document.createElement('div');
div.innerHTML = "my <b>new</b> banner <large>should be placed at the bottom</large>";
// set style
div.style.color = 'red';
div.style.backgroundColor = 'yellow'
div.style.position = 'fixed';
div.style.bottom = '0px';
div.style.height = '30px';
document.body.appendChild(div);


The code site is given. The JavaScript part is added and can manipulate the site code. My requirement is to make all the elements behind my new banner raise up.



Thanks,










share|improve this question























  • Provide the html and css you have so far.
    – Razvan Zamfir
    Nov 10 at 22:03










  • Added code sample
    – EyalS
    Nov 11 at 9:41










  • If you want to place a banner at the bottom of your website, there are ways to do that in CSS. Provide a graphic of the layout you need. I think I an help.
    – Razvan Zamfir
    Nov 11 at 9:56










  • Hi Zamfir, Thanks. Please check out the code I provided. I would like to have my banner at the bottom, and all other elements in the site raised above my banner. The site could be any site. I just provided a sample.
    – EyalS
    Nov 11 at 10:21










  • Please check my answer and tell me if it provides what you are looking for. Thanks!
    – Razvan Zamfir
    Nov 11 at 11:43















0














I’m trying to add a JavaScript component that should be added and work on various sites. My code adds a rectangle at the bottom of the site using a div with position:fixed.
On some sites, there are already some elements at the bottom of the screen, which also use position:fixed.
I would like to identify those elements and raise them up. So that both elements will be visible.
Another alternative would be to raise the whole site up and place my div at the bottom.



Does anyone have an idea, how this can be done in JavaScript/css configuration?



I've created a sample code which is similar to what I do to add the banner at the bottom of the site: http://jsfiddle.net/bp0yk7cv/8



var div = document.createElement('div');
div.innerHTML = "my <b>new</b> banner <large>should be placed at the bottom</large>";
// set style
div.style.color = 'red';
div.style.backgroundColor = 'yellow'
div.style.position = 'fixed';
div.style.bottom = '0px';
div.style.height = '30px';
document.body.appendChild(div);


The code site is given. The JavaScript part is added and can manipulate the site code. My requirement is to make all the elements behind my new banner raise up.



Thanks,










share|improve this question























  • Provide the html and css you have so far.
    – Razvan Zamfir
    Nov 10 at 22:03










  • Added code sample
    – EyalS
    Nov 11 at 9:41










  • If you want to place a banner at the bottom of your website, there are ways to do that in CSS. Provide a graphic of the layout you need. I think I an help.
    – Razvan Zamfir
    Nov 11 at 9:56










  • Hi Zamfir, Thanks. Please check out the code I provided. I would like to have my banner at the bottom, and all other elements in the site raised above my banner. The site could be any site. I just provided a sample.
    – EyalS
    Nov 11 at 10:21










  • Please check my answer and tell me if it provides what you are looking for. Thanks!
    – Razvan Zamfir
    Nov 11 at 11:43













0












0








0







I’m trying to add a JavaScript component that should be added and work on various sites. My code adds a rectangle at the bottom of the site using a div with position:fixed.
On some sites, there are already some elements at the bottom of the screen, which also use position:fixed.
I would like to identify those elements and raise them up. So that both elements will be visible.
Another alternative would be to raise the whole site up and place my div at the bottom.



Does anyone have an idea, how this can be done in JavaScript/css configuration?



I've created a sample code which is similar to what I do to add the banner at the bottom of the site: http://jsfiddle.net/bp0yk7cv/8



var div = document.createElement('div');
div.innerHTML = "my <b>new</b> banner <large>should be placed at the bottom</large>";
// set style
div.style.color = 'red';
div.style.backgroundColor = 'yellow'
div.style.position = 'fixed';
div.style.bottom = '0px';
div.style.height = '30px';
document.body.appendChild(div);


The code site is given. The JavaScript part is added and can manipulate the site code. My requirement is to make all the elements behind my new banner raise up.



Thanks,










share|improve this question















I’m trying to add a JavaScript component that should be added and work on various sites. My code adds a rectangle at the bottom of the site using a div with position:fixed.
On some sites, there are already some elements at the bottom of the screen, which also use position:fixed.
I would like to identify those elements and raise them up. So that both elements will be visible.
Another alternative would be to raise the whole site up and place my div at the bottom.



Does anyone have an idea, how this can be done in JavaScript/css configuration?



I've created a sample code which is similar to what I do to add the banner at the bottom of the site: http://jsfiddle.net/bp0yk7cv/8



var div = document.createElement('div');
div.innerHTML = "my <b>new</b> banner <large>should be placed at the bottom</large>";
// set style
div.style.color = 'red';
div.style.backgroundColor = 'yellow'
div.style.position = 'fixed';
div.style.bottom = '0px';
div.style.height = '30px';
document.body.appendChild(div);


The code site is given. The JavaScript part is added and can manipulate the site code. My requirement is to make all the elements behind my new banner raise up.



Thanks,







javascript html css css3 dom






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 11 at 9:41

























asked Nov 10 at 20:49









EyalS

4151415




4151415











  • Provide the html and css you have so far.
    – Razvan Zamfir
    Nov 10 at 22:03










  • Added code sample
    – EyalS
    Nov 11 at 9:41










  • If you want to place a banner at the bottom of your website, there are ways to do that in CSS. Provide a graphic of the layout you need. I think I an help.
    – Razvan Zamfir
    Nov 11 at 9:56










  • Hi Zamfir, Thanks. Please check out the code I provided. I would like to have my banner at the bottom, and all other elements in the site raised above my banner. The site could be any site. I just provided a sample.
    – EyalS
    Nov 11 at 10:21










  • Please check my answer and tell me if it provides what you are looking for. Thanks!
    – Razvan Zamfir
    Nov 11 at 11:43
















  • Provide the html and css you have so far.
    – Razvan Zamfir
    Nov 10 at 22:03










  • Added code sample
    – EyalS
    Nov 11 at 9:41










  • If you want to place a banner at the bottom of your website, there are ways to do that in CSS. Provide a graphic of the layout you need. I think I an help.
    – Razvan Zamfir
    Nov 11 at 9:56










  • Hi Zamfir, Thanks. Please check out the code I provided. I would like to have my banner at the bottom, and all other elements in the site raised above my banner. The site could be any site. I just provided a sample.
    – EyalS
    Nov 11 at 10:21










  • Please check my answer and tell me if it provides what you are looking for. Thanks!
    – Razvan Zamfir
    Nov 11 at 11:43















Provide the html and css you have so far.
– Razvan Zamfir
Nov 10 at 22:03




Provide the html and css you have so far.
– Razvan Zamfir
Nov 10 at 22:03












Added code sample
– EyalS
Nov 11 at 9:41




Added code sample
– EyalS
Nov 11 at 9:41












If you want to place a banner at the bottom of your website, there are ways to do that in CSS. Provide a graphic of the layout you need. I think I an help.
– Razvan Zamfir
Nov 11 at 9:56




If you want to place a banner at the bottom of your website, there are ways to do that in CSS. Provide a graphic of the layout you need. I think I an help.
– Razvan Zamfir
Nov 11 at 9:56












Hi Zamfir, Thanks. Please check out the code I provided. I would like to have my banner at the bottom, and all other elements in the site raised above my banner. The site could be any site. I just provided a sample.
– EyalS
Nov 11 at 10:21




Hi Zamfir, Thanks. Please check out the code I provided. I would like to have my banner at the bottom, and all other elements in the site raised above my banner. The site could be any site. I just provided a sample.
– EyalS
Nov 11 at 10:21












Please check my answer and tell me if it provides what you are looking for. Thanks!
– Razvan Zamfir
Nov 11 at 11:43




Please check my answer and tell me if it provides what you are looking for. Thanks!
– Razvan Zamfir
Nov 11 at 11:43












1 Answer
1






active

oldest

votes


















1














Use flexbox for your footer-at-the-bottom layout. Add display: flex; and flex-direction: column; to the footer's parent; add margin-top: auto; to the footer. Done!






* 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;


a
text-decoration: none;


img
max-width: 100%;
height: auto;


html,
body
height: 100%;


body
margin: 0;
padding: 0;
font: 12px/1 Arial, sans-serif;


p
line-height: 1.5;


.text-center
text-align: center;


.bg-black
background: #212121;


.bg-black a
color: #efefef;


.wrapper
min-height: 100%;
display: flex;
flex-direction: column;


ul.menu
list-style-type: none;
margin: 0;
padding: 0;


ul.menu.horizontal-menu li
display: inline-block;
font-size: 0;


ul.menu.horizontal-menu li a
font-size: 12px;


ul.menu.vertical-menu li
display: block;


ul.menu.vertical-menu li a
display: block;
padding: 5px 10px;


.header
display: flex;


.header .branding
margin-right: 0;
height: 52px;
line-height: 52px;


.header nav
margin-left: auto;


.header nav ul li a
height: 52px;
display: table-cell;
vertical-align: middle;


.content-sideber
display: flex;
max-width: 1200px;
margin: 0 auto;


.content-sideber .content
width: 75%;


.content-sideber .sidebar
width: 25%;


@media (max-width: 575px)
.content-sideber
flex-direction: column;

.content-sideber .content,
.content-sideber .sidebar
width: 100%;



.footer
margin-top: auto;
padding: 0 10px;

<div class="wrapper">
<header class="header bg-black">
<a class="branding" href="#">MyCompany</a>
<nav>
<ul class="menu horizontal-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main class="content-sideber">
<section class="content">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia repellat dolor natus, non tempora hic, itaque, officiis iste nemo, eligendi facere impedit commodi pariatur. At accusantium ducimus aspernatur quisquam!</p>
<p>Voluptates nobis, error illo id ab similique qui quibusdam minima doloremque excepturi facere fugiat nisi amet accusantium. Porro nesciunt totam nobis, cupiditate voluptas veritatis, sit temporibus fugit sapiente at quasi.</p>
</section>
<aside class="sidebar">
<ul class="menu vertical-menu">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
<li><a href="#">Atque excepturi corporis</a></li>
<li><a href="#">Officiis magnam</a></li>
</ul>
</aside>
</main>
<footer class="footer text-center">
<img src="https://picsum.photos/700/50/?gravity=south" alt="">
</footer>
</div>








share|improve this answer






















  • Hi Zamfir, Thanks for the answer! I need something that will enable me to just run the js code to lift the site and place my banner at the bottom. If you take my sample code, only the javascript part can be changed to add the banner at the bottom, and to understand which elements should raise, and how much.
    – EyalS
    Nov 18 at 15:27










Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243272%2fplacing-a-banner-at-the-bottom-of-a-web-site-pushing-all-elements-up%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














Use flexbox for your footer-at-the-bottom layout. Add display: flex; and flex-direction: column; to the footer's parent; add margin-top: auto; to the footer. Done!






* 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;


a
text-decoration: none;


img
max-width: 100%;
height: auto;


html,
body
height: 100%;


body
margin: 0;
padding: 0;
font: 12px/1 Arial, sans-serif;


p
line-height: 1.5;


.text-center
text-align: center;


.bg-black
background: #212121;


.bg-black a
color: #efefef;


.wrapper
min-height: 100%;
display: flex;
flex-direction: column;


ul.menu
list-style-type: none;
margin: 0;
padding: 0;


ul.menu.horizontal-menu li
display: inline-block;
font-size: 0;


ul.menu.horizontal-menu li a
font-size: 12px;


ul.menu.vertical-menu li
display: block;


ul.menu.vertical-menu li a
display: block;
padding: 5px 10px;


.header
display: flex;


.header .branding
margin-right: 0;
height: 52px;
line-height: 52px;


.header nav
margin-left: auto;


.header nav ul li a
height: 52px;
display: table-cell;
vertical-align: middle;


.content-sideber
display: flex;
max-width: 1200px;
margin: 0 auto;


.content-sideber .content
width: 75%;


.content-sideber .sidebar
width: 25%;


@media (max-width: 575px)
.content-sideber
flex-direction: column;

.content-sideber .content,
.content-sideber .sidebar
width: 100%;



.footer
margin-top: auto;
padding: 0 10px;

<div class="wrapper">
<header class="header bg-black">
<a class="branding" href="#">MyCompany</a>
<nav>
<ul class="menu horizontal-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main class="content-sideber">
<section class="content">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia repellat dolor natus, non tempora hic, itaque, officiis iste nemo, eligendi facere impedit commodi pariatur. At accusantium ducimus aspernatur quisquam!</p>
<p>Voluptates nobis, error illo id ab similique qui quibusdam minima doloremque excepturi facere fugiat nisi amet accusantium. Porro nesciunt totam nobis, cupiditate voluptas veritatis, sit temporibus fugit sapiente at quasi.</p>
</section>
<aside class="sidebar">
<ul class="menu vertical-menu">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
<li><a href="#">Atque excepturi corporis</a></li>
<li><a href="#">Officiis magnam</a></li>
</ul>
</aside>
</main>
<footer class="footer text-center">
<img src="https://picsum.photos/700/50/?gravity=south" alt="">
</footer>
</div>








share|improve this answer






















  • Hi Zamfir, Thanks for the answer! I need something that will enable me to just run the js code to lift the site and place my banner at the bottom. If you take my sample code, only the javascript part can be changed to add the banner at the bottom, and to understand which elements should raise, and how much.
    – EyalS
    Nov 18 at 15:27















1














Use flexbox for your footer-at-the-bottom layout. Add display: flex; and flex-direction: column; to the footer's parent; add margin-top: auto; to the footer. Done!






* 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;


a
text-decoration: none;


img
max-width: 100%;
height: auto;


html,
body
height: 100%;


body
margin: 0;
padding: 0;
font: 12px/1 Arial, sans-serif;


p
line-height: 1.5;


.text-center
text-align: center;


.bg-black
background: #212121;


.bg-black a
color: #efefef;


.wrapper
min-height: 100%;
display: flex;
flex-direction: column;


ul.menu
list-style-type: none;
margin: 0;
padding: 0;


ul.menu.horizontal-menu li
display: inline-block;
font-size: 0;


ul.menu.horizontal-menu li a
font-size: 12px;


ul.menu.vertical-menu li
display: block;


ul.menu.vertical-menu li a
display: block;
padding: 5px 10px;


.header
display: flex;


.header .branding
margin-right: 0;
height: 52px;
line-height: 52px;


.header nav
margin-left: auto;


.header nav ul li a
height: 52px;
display: table-cell;
vertical-align: middle;


.content-sideber
display: flex;
max-width: 1200px;
margin: 0 auto;


.content-sideber .content
width: 75%;


.content-sideber .sidebar
width: 25%;


@media (max-width: 575px)
.content-sideber
flex-direction: column;

.content-sideber .content,
.content-sideber .sidebar
width: 100%;



.footer
margin-top: auto;
padding: 0 10px;

<div class="wrapper">
<header class="header bg-black">
<a class="branding" href="#">MyCompany</a>
<nav>
<ul class="menu horizontal-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main class="content-sideber">
<section class="content">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia repellat dolor natus, non tempora hic, itaque, officiis iste nemo, eligendi facere impedit commodi pariatur. At accusantium ducimus aspernatur quisquam!</p>
<p>Voluptates nobis, error illo id ab similique qui quibusdam minima doloremque excepturi facere fugiat nisi amet accusantium. Porro nesciunt totam nobis, cupiditate voluptas veritatis, sit temporibus fugit sapiente at quasi.</p>
</section>
<aside class="sidebar">
<ul class="menu vertical-menu">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
<li><a href="#">Atque excepturi corporis</a></li>
<li><a href="#">Officiis magnam</a></li>
</ul>
</aside>
</main>
<footer class="footer text-center">
<img src="https://picsum.photos/700/50/?gravity=south" alt="">
</footer>
</div>








share|improve this answer






















  • Hi Zamfir, Thanks for the answer! I need something that will enable me to just run the js code to lift the site and place my banner at the bottom. If you take my sample code, only the javascript part can be changed to add the banner at the bottom, and to understand which elements should raise, and how much.
    – EyalS
    Nov 18 at 15:27













1












1








1






Use flexbox for your footer-at-the-bottom layout. Add display: flex; and flex-direction: column; to the footer's parent; add margin-top: auto; to the footer. Done!






* 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;


a
text-decoration: none;


img
max-width: 100%;
height: auto;


html,
body
height: 100%;


body
margin: 0;
padding: 0;
font: 12px/1 Arial, sans-serif;


p
line-height: 1.5;


.text-center
text-align: center;


.bg-black
background: #212121;


.bg-black a
color: #efefef;


.wrapper
min-height: 100%;
display: flex;
flex-direction: column;


ul.menu
list-style-type: none;
margin: 0;
padding: 0;


ul.menu.horizontal-menu li
display: inline-block;
font-size: 0;


ul.menu.horizontal-menu li a
font-size: 12px;


ul.menu.vertical-menu li
display: block;


ul.menu.vertical-menu li a
display: block;
padding: 5px 10px;


.header
display: flex;


.header .branding
margin-right: 0;
height: 52px;
line-height: 52px;


.header nav
margin-left: auto;


.header nav ul li a
height: 52px;
display: table-cell;
vertical-align: middle;


.content-sideber
display: flex;
max-width: 1200px;
margin: 0 auto;


.content-sideber .content
width: 75%;


.content-sideber .sidebar
width: 25%;


@media (max-width: 575px)
.content-sideber
flex-direction: column;

.content-sideber .content,
.content-sideber .sidebar
width: 100%;



.footer
margin-top: auto;
padding: 0 10px;

<div class="wrapper">
<header class="header bg-black">
<a class="branding" href="#">MyCompany</a>
<nav>
<ul class="menu horizontal-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main class="content-sideber">
<section class="content">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia repellat dolor natus, non tempora hic, itaque, officiis iste nemo, eligendi facere impedit commodi pariatur. At accusantium ducimus aspernatur quisquam!</p>
<p>Voluptates nobis, error illo id ab similique qui quibusdam minima doloremque excepturi facere fugiat nisi amet accusantium. Porro nesciunt totam nobis, cupiditate voluptas veritatis, sit temporibus fugit sapiente at quasi.</p>
</section>
<aside class="sidebar">
<ul class="menu vertical-menu">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
<li><a href="#">Atque excepturi corporis</a></li>
<li><a href="#">Officiis magnam</a></li>
</ul>
</aside>
</main>
<footer class="footer text-center">
<img src="https://picsum.photos/700/50/?gravity=south" alt="">
</footer>
</div>








share|improve this answer














Use flexbox for your footer-at-the-bottom layout. Add display: flex; and flex-direction: column; to the footer's parent; add margin-top: auto; to the footer. Done!






* 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;


a
text-decoration: none;


img
max-width: 100%;
height: auto;


html,
body
height: 100%;


body
margin: 0;
padding: 0;
font: 12px/1 Arial, sans-serif;


p
line-height: 1.5;


.text-center
text-align: center;


.bg-black
background: #212121;


.bg-black a
color: #efefef;


.wrapper
min-height: 100%;
display: flex;
flex-direction: column;


ul.menu
list-style-type: none;
margin: 0;
padding: 0;


ul.menu.horizontal-menu li
display: inline-block;
font-size: 0;


ul.menu.horizontal-menu li a
font-size: 12px;


ul.menu.vertical-menu li
display: block;


ul.menu.vertical-menu li a
display: block;
padding: 5px 10px;


.header
display: flex;


.header .branding
margin-right: 0;
height: 52px;
line-height: 52px;


.header nav
margin-left: auto;


.header nav ul li a
height: 52px;
display: table-cell;
vertical-align: middle;


.content-sideber
display: flex;
max-width: 1200px;
margin: 0 auto;


.content-sideber .content
width: 75%;


.content-sideber .sidebar
width: 25%;


@media (max-width: 575px)
.content-sideber
flex-direction: column;

.content-sideber .content,
.content-sideber .sidebar
width: 100%;



.footer
margin-top: auto;
padding: 0 10px;

<div class="wrapper">
<header class="header bg-black">
<a class="branding" href="#">MyCompany</a>
<nav>
<ul class="menu horizontal-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main class="content-sideber">
<section class="content">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia repellat dolor natus, non tempora hic, itaque, officiis iste nemo, eligendi facere impedit commodi pariatur. At accusantium ducimus aspernatur quisquam!</p>
<p>Voluptates nobis, error illo id ab similique qui quibusdam minima doloremque excepturi facere fugiat nisi amet accusantium. Porro nesciunt totam nobis, cupiditate voluptas veritatis, sit temporibus fugit sapiente at quasi.</p>
</section>
<aside class="sidebar">
<ul class="menu vertical-menu">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
<li><a href="#">Atque excepturi corporis</a></li>
<li><a href="#">Officiis magnam</a></li>
</ul>
</aside>
</main>
<footer class="footer text-center">
<img src="https://picsum.photos/700/50/?gravity=south" alt="">
</footer>
</div>








* 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;


a
text-decoration: none;


img
max-width: 100%;
height: auto;


html,
body
height: 100%;


body
margin: 0;
padding: 0;
font: 12px/1 Arial, sans-serif;


p
line-height: 1.5;


.text-center
text-align: center;


.bg-black
background: #212121;


.bg-black a
color: #efefef;


.wrapper
min-height: 100%;
display: flex;
flex-direction: column;


ul.menu
list-style-type: none;
margin: 0;
padding: 0;


ul.menu.horizontal-menu li
display: inline-block;
font-size: 0;


ul.menu.horizontal-menu li a
font-size: 12px;


ul.menu.vertical-menu li
display: block;


ul.menu.vertical-menu li a
display: block;
padding: 5px 10px;


.header
display: flex;


.header .branding
margin-right: 0;
height: 52px;
line-height: 52px;


.header nav
margin-left: auto;


.header nav ul li a
height: 52px;
display: table-cell;
vertical-align: middle;


.content-sideber
display: flex;
max-width: 1200px;
margin: 0 auto;


.content-sideber .content
width: 75%;


.content-sideber .sidebar
width: 25%;


@media (max-width: 575px)
.content-sideber
flex-direction: column;

.content-sideber .content,
.content-sideber .sidebar
width: 100%;



.footer
margin-top: auto;
padding: 0 10px;

<div class="wrapper">
<header class="header bg-black">
<a class="branding" href="#">MyCompany</a>
<nav>
<ul class="menu horizontal-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main class="content-sideber">
<section class="content">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia repellat dolor natus, non tempora hic, itaque, officiis iste nemo, eligendi facere impedit commodi pariatur. At accusantium ducimus aspernatur quisquam!</p>
<p>Voluptates nobis, error illo id ab similique qui quibusdam minima doloremque excepturi facere fugiat nisi amet accusantium. Porro nesciunt totam nobis, cupiditate voluptas veritatis, sit temporibus fugit sapiente at quasi.</p>
</section>
<aside class="sidebar">
<ul class="menu vertical-menu">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
<li><a href="#">Atque excepturi corporis</a></li>
<li><a href="#">Officiis magnam</a></li>
</ul>
</aside>
</main>
<footer class="footer text-center">
<img src="https://picsum.photos/700/50/?gravity=south" alt="">
</footer>
</div>





* 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;


a
text-decoration: none;


img
max-width: 100%;
height: auto;


html,
body
height: 100%;


body
margin: 0;
padding: 0;
font: 12px/1 Arial, sans-serif;


p
line-height: 1.5;


.text-center
text-align: center;


.bg-black
background: #212121;


.bg-black a
color: #efefef;


.wrapper
min-height: 100%;
display: flex;
flex-direction: column;


ul.menu
list-style-type: none;
margin: 0;
padding: 0;


ul.menu.horizontal-menu li
display: inline-block;
font-size: 0;


ul.menu.horizontal-menu li a
font-size: 12px;


ul.menu.vertical-menu li
display: block;


ul.menu.vertical-menu li a
display: block;
padding: 5px 10px;


.header
display: flex;


.header .branding
margin-right: 0;
height: 52px;
line-height: 52px;


.header nav
margin-left: auto;


.header nav ul li a
height: 52px;
display: table-cell;
vertical-align: middle;


.content-sideber
display: flex;
max-width: 1200px;
margin: 0 auto;


.content-sideber .content
width: 75%;


.content-sideber .sidebar
width: 25%;


@media (max-width: 575px)
.content-sideber
flex-direction: column;

.content-sideber .content,
.content-sideber .sidebar
width: 100%;



.footer
margin-top: auto;
padding: 0 10px;

<div class="wrapper">
<header class="header bg-black">
<a class="branding" href="#">MyCompany</a>
<nav>
<ul class="menu horizontal-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main class="content-sideber">
<section class="content">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia repellat dolor natus, non tempora hic, itaque, officiis iste nemo, eligendi facere impedit commodi pariatur. At accusantium ducimus aspernatur quisquam!</p>
<p>Voluptates nobis, error illo id ab similique qui quibusdam minima doloremque excepturi facere fugiat nisi amet accusantium. Porro nesciunt totam nobis, cupiditate voluptas veritatis, sit temporibus fugit sapiente at quasi.</p>
</section>
<aside class="sidebar">
<ul class="menu vertical-menu">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
<li><a href="#">Atque excepturi corporis</a></li>
<li><a href="#">Officiis magnam</a></li>
</ul>
</aside>
</main>
<footer class="footer text-center">
<img src="https://picsum.photos/700/50/?gravity=south" alt="">
</footer>
</div>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 11 at 11:58

























answered Nov 11 at 11:36









Razvan Zamfir

8181956




8181956











  • Hi Zamfir, Thanks for the answer! I need something that will enable me to just run the js code to lift the site and place my banner at the bottom. If you take my sample code, only the javascript part can be changed to add the banner at the bottom, and to understand which elements should raise, and how much.
    – EyalS
    Nov 18 at 15:27
















  • Hi Zamfir, Thanks for the answer! I need something that will enable me to just run the js code to lift the site and place my banner at the bottom. If you take my sample code, only the javascript part can be changed to add the banner at the bottom, and to understand which elements should raise, and how much.
    – EyalS
    Nov 18 at 15:27















Hi Zamfir, Thanks for the answer! I need something that will enable me to just run the js code to lift the site and place my banner at the bottom. If you take my sample code, only the javascript part can be changed to add the banner at the bottom, and to understand which elements should raise, and how much.
– EyalS
Nov 18 at 15:27




Hi Zamfir, Thanks for the answer! I need something that will enable me to just run the js code to lift the site and place my banner at the bottom. If you take my sample code, only the javascript part can be changed to add the banner at the bottom, and to understand which elements should raise, and how much.
– EyalS
Nov 18 at 15:27

















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid …


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243272%2fplacing-a-banner-at-the-bottom-of-a-web-site-pushing-all-elements-up%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Top Tejano songwriter Luis Silva dead of heart attack at 64

政党

天津地下鉄3号線