Placing a banner at the bottom of a web site pushing all elements up
up vote
0
down vote
favorite
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
asked Nov 10 at 20:49
EyalS
4101415
|
show 1 more comment
up vote
0
down vote
favorite
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
asked Nov 10 at 20:49
EyalS
4101415
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
|
show 1 more comment
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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
asked Nov 10 at 20:49
EyalS
4101415
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
javascript html css css3 dom
asked Nov 10 at 20:49
EyalS
4101415
asked Nov 10 at 20:49
EyalS
4101415
edited Nov 11 at 9:41
asked Nov 10 at 20:49
EyalS
4101415
asked Nov 10 at 20:49
EyalS
4101415
asked Nov 10 at 20:49
EyalS
4101415
4101415
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
|
show 1 more comment
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
|
show 1 more comment
1 Answer
1
active
oldest
votes
up vote
1
down vote
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>answered Nov 11 at 11:36
Razvan Zamfir
7711955
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
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
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>answered Nov 11 at 11:36
Razvan Zamfir
7711955
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
add a comment |
up vote
1
down vote
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>answered Nov 11 at 11:36
Razvan Zamfir
7711955
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
add a comment |
up vote
1
down vote
up vote
1
down vote
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>answered Nov 11 at 11:36
Razvan Zamfir
7711955
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>answered Nov 11 at 11:36
Razvan Zamfir
7711955
edited Nov 11 at 11:58
answered Nov 11 at 11:36
Razvan Zamfir
7711955
answered Nov 11 at 11:36
Razvan Zamfir
7711955
answered Nov 11 at 11:36
Razvan Zamfir
7711955
7711955
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
add a comment |
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
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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