So the body of my page has some white space on each side, and I would like my header logo to be aligned on the left so that no matter what size the window is, it will vertically start at the same place the body does.
I can not figure out how because the body is centered, but has a percentage width, while my header logo is natively in the middle, and floating it to the left and adding a margin/padding (no matter if it is percentage or pixel) does not make it responsive to larger screens than my laptop.
The css for my container is:
.td-container {
width: 95%;
max-width: 1350px;
margin-right: auto;
margin-left: auto;
}
And so far for my header, I have tried:
.td-main-logo img {
max-width: 1350px;
margin-right: auto;
margin-left: auto;
}
and:
.td-main-logo img {
max-width: 1350px;
margin-left: 6%;
}
Body tag has margin around it. Try to reset it to "hide" white space.
CSS
body {margin:0}
Tips,
margin-left:auto and margin-right:auto is same as margin:auto
try to use box-sizing:border-box with padding (https://www.google.cz/search?q=box-sizing%20css)
LIVE EXAMPLE: http://codepen.io/anon/pen/oBMBax
(You haven't provided more informations)
What about this? I have changed the width to 600px just for demo purposes (same the outline)
.td-main-logo,
.td-container {
width: 95%;
max-width: 600px;
margin-right: auto;
margin-left: auto;
}
.td-container,
.td-main-logo{
outline: 1px solid red;
}
<div class="td-main-logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="100px">
</div>
<div class="td-container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt nihil consequuntur, quasi dicta officiis distinctio, aliquid soluta provident tempore magni temporibus autem, facilis voluptatum ab blanditiis fuga tempora vel tenetur officia voluptate. Quaerat dolor magnam, dolore sint id ducimus ea optio rem nobis doloremque quam animi quidem veritatis assumenda commodi, ratione aspernatur. Ad nemo eos at quis quos saepe numquam, tempora blanditiis minus, pariatur soluta unde dolorem aut beatae esse nam, accusamus dolore rerum quam necessitatibus aspernatur explicabo doloremque. Quae rem error quia facilis deleniti asperiores excepturi numquam illum quo. Eius cupiditate laudantium molestiae ex ipsam perspiciatis, nam! Beatae tempora iure aliquid accusamus illum, adipisci? Ducimus praesentium commodi, aspernatur debitis voluptate omnis nemo quia illo magnam quis voluptates, ullam laborum tenetur dolorum ut. Molestias ex quas ea, excepturi praesentium error, natus ut quaerat porro, tenetur dolorum eaque exercitationem hic officiis repellat est suscipit dolor dolore velit. Doloribus rerum porro deserunt.
</div>
`
Related
I'm trying to find a way to make an element resizable so that it will simultaneously reveal more of the element's content as the height increases while covering the content of the other element that it is taking space from.
An example of this is of Gmail's left sidebar, these two images show before and after the resize drag: Sidebar Before - Sidebar After
I was thinking it could be done with the CSS resize property, but while the lower element can be resized downwards, it won't resize upwards taking space from the above element, and the resize grabber also seems to be difficult to change its position from the bottom right to the top.
Thank you in advance.
You can use the resize property together with a flex setting that causes the other element to occupy the rest of the space.
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 80vh;
margin:1em;
}
.container>div {
padding: 1em;
border: 2px solid rgba(0, 0, 0, 0.5);
overflow: auto;
}
.top {
resize: vertical;
height: 50%;
}
.bottom {
flex: 1;
}
<div class="container">
<div class="top">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga repellat laborum maxime ipsam sed quisquam, numquam eligendi doloribus non nisi unde vero deleniti velit dolore nesciunt error, sapiente provident at sint sunt! Cumque nostrum, placeat nisi,
minima, maiores molestiae quas praesentium mollitia hic natus suscipit nemo accusantium, beatae itaque rem aut omnis? Quisquam, natus dicta eveniet! Voluptates repellat, assumenda fugit. At, culpa quos nulla. Dolorem et modi quisquam velit quaerat
aspernatur iste natus eum magnam vero, id eius expedita quo placeat maiores enim quas iusto amet dolor ullam aperiam sequi laboriosam. Omnis voluptas, a exercitationem cum quidem quaerat ullam deleniti.
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet a magni culpa quidem in et facilis, ducimus voluptate explicabo saepe repellat, eius sequi molestias voluptatum! Maiores animi quasi quia nisi, pariatur id aperiam! Veritatis error molestias
minima modi suscipit ipsam eius sed perspiciatis est nobis illo, incidunt itaque harum, distinctio?
</div>
</div>
I am attempting to have text wrap onto the next line but instead of wrapping the text directly beneath the first line, have it wrap and begin at the far left of the viewport. Is this possible?
<div class="wrapper">
<p>some text</p>
<span> / </span>
<p class="some-long-text">this is an unnecessarily long string that will wrap to the next line on small devices</p>
</div>
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
> { display: flex; }
.some-long-text {
word-break: break-word;
white-space: inherit;
text-align: left;
}
}
This is essentially what I'm seeing:
It is possible. I think this might be what you are looking for.
.some-text {
display: inline;
}
.span-div {
float: left;
}
.slash {
padding: 0 1rem;
}
<span class="span-div"><p class="some-text">some text</p><span class="slash">/</span></span><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam reprehenderit vel dolores, neque perspiciatis repellendus quasi assumenda, eaque incidunt totam at officiis qui, sunt facere eveniet aliquid optio, officia atque tenetur odit iste expedita. Est officia cum, nisi, voluptatum consequuntur veniam. Suscipit excepturi repellat, adipisci delectus, unde consequatur impedit amet vero voluptates minus voluptatum aut alias, quod. Quaerat doloribus numquam alias veniam fugiat, recusandae debitis ad atque ipsam esse sit nostrum, dignissimos accusamus facere minima reiciendis rem repellendus iusto, nesciunt perferendis sequi. Voluptatum nesciunt enim et explicabo, laudantium optio iusto expedita fugiat dolores, at debitis molestiae autem, eius totam incidunt!</p>
I created a popup with CSS and when I check it on mobile devices I can't scroll down.
.popup {
position: fixed;
left: 0;
right: 0;
top: 20%;
width: 100%;
max-width: 500px;
margin: auto;
background: #fff;
padding: 40px;
text-align: center;
box-shadow: 0 0 90px #aaa;
z-index: 410;
}
<div class="popup">
<h2>Login</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nulla facere, velit fuga. Natus suscipit, vel non, quas ullam accusamus eius at unde consequatur quo, quaerat. Quibusdam provident sunt adipisci, perspiciatis doloribus, porro consectetur, libero ad ipsa quo error nihil. Nisi, laboriosam illum sapiente enim exercitationem! Expedita quod, aliquid corporis eveniet veritatis harum eos ad minus eligendi a amet ipsam at neque saepe excepturi inventore nobis consequuntur magnam sint quas perspiciatis ratione ea tenetur facilis fugit. Ex consectetur sequi voluptas odio unde, dolorum amet, non eius minima eaque rerum, deleniti repellendus sunt accusantium culpa explicabo mollitia molestiae nobis! Architecto deserunt necessitatibus maxime. Nulla quis maxime veritatis reprehenderit aut, velit voluptatibus suscipit harum consequuntur atque doloribus fuga expedita ab laboriosam veniam animi, similique quo? Illum nisi odit voluptatum corporis accusantium ab, libero, dolorum nesciunt maiores quasi alias. Dolore hic, vero. Cupiditate velit error praesentium tempore consequatur ipsum repellat eaque ex, tenetur, saepe odit magnam omnis! Mollitia cum nesciunt quibusdam eos ea voluptas delectus doloribus ipsam nemo quisquam numquam ratione hic accusamus animi perferendis, qui laudantium dolorem nostrum. Voluptatum eveniet consequatur laudantium asperiores, quia esse explicabo nemo nam repellat voluptas ab dolorem maxime reiciendis nostrum, libero non minima? Sint sed aliquid dignissimos!</p>
</div>
Preview: https://jsfiddle.net/ea1grfqr/
Since it is a popup, I am assuming the position does not need to be fixed. Just change your position to absolute. Here's more about positioning.
.popup {
position: absolute;
left: 0;
right: 0;
top: 20%;
width: 100%;
max-width: 500px;
margin: auto;
background: #fff;
padding: 40px;
text-align: center;
box-shadow: 0 0 90px #aaa;
z-index: 410;
}
<div class="popup">
<h2>Login</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nulla facere, velit fuga. Natus suscipit, vel non, quas ullam accusamus eius at unde consequatur quo, quaerat. Quibusdam provident sunt adipisci, perspiciatis doloribus, porro consectetur, libero ad ipsa quo error nihil. Nisi, laboriosam illum sapiente enim exercitationem! Expedita quod, aliquid corporis eveniet veritatis harum eos ad minus eligendi a amet ipsam at neque saepe excepturi inventore nobis consequuntur magnam sint quas perspiciatis ratione ea tenetur facilis fugit. Ex consectetur sequi voluptas odio unde, dolorum amet, non eius minima eaque rerum, deleniti repellendus sunt accusantium culpa explicabo mollitia molestiae nobis! Architecto deserunt necessitatibus maxime. Nulla quis maxime veritatis reprehenderit aut, velit voluptatibus suscipit harum consequuntur atque doloribus fuga expedita ab laboriosam veniam animi, similique quo? Illum nisi odit voluptatum corporis accusantium ab, libero, dolorum nesciunt maiores quasi alias. Dolore hic, vero. Cupiditate velit error praesentium tempore consequatur ipsum repellat eaque ex, tenetur, saepe odit magnam omnis! Mollitia cum nesciunt quibusdam eos ea voluptas delectus doloribus ipsam nemo quisquam numquam ratione hic accusamus animi perferendis, qui laudantium dolorem nostrum. Voluptatum eveniet consequatur laudantium asperiores, quia esse explicabo nemo nam repellat voluptas ab dolorem maxime reiciendis nostrum, libero non minima? Sint sed aliquid dignissimos!</p>
</div>
Below I have given the code for a scrollbar in HTML, see if this allows for the whole popup to be seen:
<div id="" style="overflow-y: scroll; height:400px;">
You'll need to change the height to your preference.
Need height for example 50% then use overflow: auto;
Works with position:fixed;
.popup {
height: 50%;
overflow: auto;
position: fixed;
left: 0;
right: 0;
top: 20%;
width: 100%;
max-width: 500px;
margin: auto;
background: #fff;
padding: 40px;
text-align: center;
box-shadow: 0 0 90px #aaa;
z-index: 410;
}
When the following CSS property is added to an image, the image still occupies the same space that it did when it was sized at 100%? Is there a way to make the text fill the space around this image?
transform: scale(0.2);
height: auto;
float: right;
That's not how transform works as I understand it. It only changes the appearance visually; the actual dimensions of the original object are maintained.
You would have to adjust the width/height of the image rather than use transform.
Demo in jsFiddle & StackSnippets:
div {
background: #bae5fc;
overflow: hidden;
margin-bottom: 25px;
width: 40%;
float: left;
margin: 2%;
padding: 4px;
}
img {
float: right;
display: block;
transition: all 0.5s ease;
max-width: 50%;
}
.trans:hover img {
transform: scale(0.5);
}
.dimen:hover img {
max-width: 25%;
}
<div class="trans">
<img src="https://picsum.photos/400/200" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas sequi fugit quis ipsam veniam dicta sint aliquid magnam deleniti doloribus rerum laudantium eveniet expedita ipsa ducimus vero fuga optio dolor hic adipisci minima dolorem nemo mollitia?
Autem repellat minus aliquam odit magni deserunt quibusdam voluptas repellendus ipsum recusandae rem nisi dolor sunt veritatis quas sapiente maiores consectetur sequi laudantium saepe. Recusandae deserunt quidem rerum quia enim possimus sed iure aliquid
a consectetur magnam molestias voluptas vero nisi adipisci sequi libero natus illum facere praesentium deleniti tempora nam quas ducimus corporis maiores placeat expedita est cupiditate ipsam modi cumque quos eveniet totam illo nemo harum commodi
odio aliquam quo eaque pariatur. Minima eum deleniti impedit!
</p>
</div>
<div class="dimen">
<img src="https://picsum.photos/400/200" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas sequi fugit quis ipsam veniam dicta sint aliquid magnam deleniti doloribus rerum laudantium eveniet expedita ipsa ducimus vero fuga optio dolor hic adipisci minima dolorem nemo mollitia?
Autem repellat minus aliquam odit magni deserunt quibusdam voluptas repellendus ipsum recusandae rem nisi dolor sunt veritatis quas sapiente maiores consectetur sequi laudantium saepe. Recusandae deserunt quidem rerum quia enim possimus sed iure aliquid
a consectetur magnam molestias voluptas vero nisi adipisci sequi libero natus illum facere praesentium deleniti tempora nam quas ducimus corporis maiores placeat expedita est cupiditate ipsam modi cumque quos eveniet totam illo nemo harum commodi
odio aliquam quo eaque pariatur. Minima eum deleniti impedit!
</p>
</div>
Is there any way to stick a footer to the bottom of the browser screen or right after the content (depending on which is longer) using CSS without knowing the size of the footer in advance?
Right now I am using the absolute positioning in a container that holds the footer and the content with container's min-height as 100%, but if I change the footer I find I must change the padding at the bottom of the container to match its height.
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
Summary:
For a site with a header, content area, and footer:
Set html, body {height: 100%;}
Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;
Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto;
The header and footer will both expand to fit their content. The content area will expand to fit the larger of its content, or the available space.
https://jsfiddle.net/0cx30dqf/
If you're willing to jump into the HTML5 future, you can use flexbox...
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
My more detailed answer to the same question: How to make a fluid sticky footer (full example: http://jsfiddle.net/n5BaR/)
Solved by flexbox: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
What is Flexbox from MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Try this!
Uses Flex!
NO FIXED HEIGHT, JAVASCRIPT OR TABLES
Expands when more content, and when there isn't it sticks to bottom
Note: Does not work with IE 9 & Below
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
min-height: 100%;
display: flex;
flex-direction: column;
}
.content{
flex: 1;
background: #ddd;
}
<body>
<header>
Header
</header>
<div class='content'>
This is the page content
<br>
PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the body css)
</div>
<footer>
Footer
</footer>
</body>
For an app with a responsive footer (i.e. changes height on resize), you can use jquery to dynamically adjust the padding of the bottom for the parent element. Adding onto this post: Keep Footer at Bottom
HTML:
<div class=”main-container”>
<header>
this is a header
</header>
<section>
this is content
</section>
<footer>
this is a footer
</footer>
</div>
CSS:
html,
body {
height: 100%;
position: relative;
}
.main-container {
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
CoffeeScript:
footerEventListener = ->
$(window).on "resize", ->
setFooterHeight()
setFooterHeight = ->
// get footer height in px
bottomPadding = $("footer").css("height")
$(".main-wrapper").css("padding-bottom", "#{bottomPadding}")
// init footer events
setFooterHeight()
footerEventListener()
Check out the CodePen here.
since no one knows the answer for sticky footer w/o knowing the height of it, using css (crosbrowser solution), i was forced to calculate it
jquery:
if( $(document).height() < $(window).height() )
{
$('#content').height
(
$(window).height - $('#footer').height()
);
}
html structure:
<div id="content"></div>
<div id="footer"></div>
I think the best way is just add a class to your footer. Javascript will do the rest.
//This Pen is By Mohammad Abdus Salam
//portfolio.codeexposer.com
var footerHeight = $('footer.fixed_footer').height();
if($('footer').hasClass('fixed_footer')){
$( "section" ).last().css({
"margin-bottom": footerHeight + 'px'
});
}
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700,800');
body{
margin: 0;
padding: 0;
text-align:center;
font-family: 'Raleway', sans-serif;
line-height: 30px;
}
section{
padding-top: 80px;
padding-bottom: 80px;
border-bottom:1px solid #ddd;
background: #ffffff;
z-index: 9;
}
h1{
font-size: 48px;
font-weight: 800;
text-transform: capitalize;
}
a{
text-decoration: none;
}
.container{
width: 700px;
display: inline-block;
box-sizing:border-box;
padding-left: 30px;
padding-right: 30px;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
}
.footer_top{
border-bottom: 1px solid #777;
padding-bottom: 60px;
}
.logo img{
width: 100%;
height: 100%;
}
.footer_bottom {}
.footer_bottom p{
color:#aaa;
}
.footer_top{
padding-top: 100px;
}
.footer_bottom p a{
color:#158;
}
footer{
width: 100%;
left: 0;
bottom:0px;
z-index: -1;
background: #222222;
}
.fixed_footer{
width: 100%;
position:fixed;
left: 0;
bottom:0;
z-index: -99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is About</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Service</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Portfolio</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<footer class="fixed_footer">
<div class="container">
<div class="footer_top">
<a class="logo" href="portfolio.codeexposer.com">
<img src="https://lh3.googleusercontent.com/-a700z77yIxk/AAAAAAAAAAI/AAAAAAAAABM/RzvY_qm9KQY/s512-p/photo.jpg" alt="">
</a>
</div>
<div class="footer_bottom">
<p>
All Rights Reserved By Mohammad Abdus Salam
</p>
</div>
</div>
</footer>
Take a look at this, cssstickyfooter, it works great in any browser.
Update: This is from 2010, might not be relevant with current standards