Related
I need to make a navbar in the left of the page just like this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_fixed2
But i need also to make that navbar hiding when reaching footer and re-appear when scrolling up.
Is it possible?
Thank in advance
This can be done using CSS and Jquery
Ill provide you and example here to see how you can achieve this.
$(document).ready(function() {
function sticky_relocate() {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $("#sticky").height();
if (window_top + div_height > footer_top) $('#sticky').removeClass('stick');
else if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
});
#sticky {
padding: 0.5ex;
width: 200px;
height: 300px;
background-color: #eee;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
float: left;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10;
border-radius: 0 0 0.5em 0.5em;
}
#sticky a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
#sticky a:hover {
color: #064579;
}
.content-holder {
margin-left: 225px;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
#footer {
width: 100%;
height: 600px;
background: #ccc;
z-index: 999999
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainsection">
<div class="sidenav" id="sticky">
About Services Clients Contact
</div>
<div id="sticky-anchor"></div>
<div class="content-holder">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis id consectetur purus ut faucibus pulvinar. Turpis massa tincidunt dui ut ornare lectus sit amet est. Semper auctor neque vitae tempus quam pellentesque nec nam. Ut faucibus pulvinar elementum integer enim neque volutpat. Nec dui nunc mattis enim ut. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Proin sed libero enim sed faucibus turpis. Fermentum posuere urna nec tincidunt. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Id aliquet lectus proin nibh nisl. Venenatis urna cursus eget nunc scelerisque viverra mauris. Vitae auctor eu augue ut lectus. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Mauris sit amet massa vitae tortor condimentum lacinia quis. Mauris rhoncus aenean vel elit scelerisque. Varius morbi enim nunc faucibus a pellentesque sit. Egestas integer eget aliquet nibh praesent tristique.</p>
<p>Sit amet porttitor eget dolor morbi non arcu risus quis. Id diam vel quam elementum pulvinar etiam. Id porta nibh venenatis cras sed felis eget velit. Auctor elit sed vulputate mi sit amet mauris commodo quis. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Ultricies integer quis auctor elit sed vulputate. Netus et malesuada fames ac turpis egestas maecenas pharetra. Molestie at elementum eu facilisis sed odio morbi. Mi bibendum neque egestas congue quisque egestas. Netus et malesuada fames ac turpis egestas. Convallis aenean et tortor at risus viverra adipiscing at. Elit at imperdiet dui accumsan sit amet nulla facilisi.</p>
<p>Quam pellentesque nec nam aliquam sem. Nunc sed augue lacus viverra vitae. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Vitae justo eget magna fermentum iaculis eu. Eu augue ut lectus arcu bibendum. Consectetur adipiscing elit ut aliquam purus. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Donec et odio pellentesque diam volutpat commodo. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Turpis egestas pretium aenean pharetra magna ac placerat. Habitasse platea dictumst quisque sagittis. Est velit egestas dui id ornare arcu odio ut sem. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Integer quis auctor elit sed vulputate mi. A scelerisque purus semper eget duis. Eget sit amet tellus cras adipiscing enim. Cursus risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Urna nunc id cursus metus aliquam eleifend mi. Id leo in vitae turpis massa. Nibh tellus molestie nunc non blandit massa enim nec dui.</p>
<p>Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Non tellus orci ac auctor augue mauris augue neque gravida. Nisl nunc mi ipsum faucibus vitae aliquet nec. Consectetur adipiscing elit pellentesque habitant morbi tristique. Nisi est sit amet facilisis magna etiam. Odio facilisis mauris sit amet massa vitae tortor. Amet est placerat in egestas erat imperdiet. Ut eu sem integer vitae justo eget magna fermentum. Ac felis donec et odio pellentesque diam volutpat commodo.</p>
<p>Eleifend mi in nulla posuere sollicitudin aliquam ultrices. Mauris commodo quis imperdiet massa. Nunc id cursus metus aliquam eleifend mi in nulla. Nisi est sit amet facilisis magna etiam tempor orci eu. Vitae ultricies leo integer malesuada nunc vel risus. Lobortis feugiat vivamus at augue eget arcu. Risus at ultrices mi tempus. In hac habitasse platea dictumst vestibulum rhoncus. Cursus euismod quis viverra nibh cras pulvinar mattis. Odio aenean sed adipiscing diam donec adipiscing tristique risus. Odio eu feugiat pretium nibh ipsum consequat. Amet tellus cras adipiscing enim. Ornare arcu odio ut sem nulla pharetra diam.</p>
<p>Facilisis gravida neque convallis a cras semper auctor. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Et molestie ac feugiat sed lectus vestibulum mattis. Eget mauris pharetra et ultrices neque ornare aenean. Dolor morbi non arcu risus quis varius. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Erat nam at lectus urna. Lorem mollis aliquam ut porttitor leo a diam. Congue quisque egestas diam in. Maecenas pharetra convallis posuere morbi leo urna molestie at.</p>
<p>Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Netus et malesuada fames ac turpis egestas maecenas. Tortor id aliquet lectus proin. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Scelerisque fermentum dui faucibus in. Nisi est sit amet facilisis magna etiam. Scelerisque eleifend donec pretium vulputate. Enim nunc faucibus a pellentesque sit amet porttitor eget. Velit euismod in pellentesque massa placerat duis ultricies. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Et ultrices neque ornare aenean euismod elementum. Orci porta non pulvinar neque.</p>
<p>Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Praesent semper feugiat nibh sed pulvinar. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Aliquet risus feugiat in ante metus. Maecenas accumsan lacus vel facilisis volutpat est. Faucibus ornare suspendisse sed nisi lacus sed viverra. Sed vulputate odio ut enim. Consectetur adipiscing elit ut aliquam purus.</p>
<p>Nam libero justo laoreet sit amet cursus sit amet dictum. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Mi tempus imperdiet nulla malesuada. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Egestas diam in arcu cursus euismod quis viverra nibh cras. Nisi quis eleifend quam adipiscing vitae proin. Est sit amet facilisis magna etiam tempor. Enim sed faucibus turpis in eu mi bibendum neque egestas.</p>
<p>Gravida dictum fusce ut placerat orci nulla pellentesque. Nulla malesuada pellentesque elit eget. Convallis tellus id interdum velit. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Molestie at elementum eu facilisis. Diam phasellus vestibulum lorem sed risus ultricies tristique. Nunc sed velit dignissim sodales. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Id aliquet risus feugiat in ante. Sapien pellentesque habitant morbi tristique senectus et netus et. Amet volutpat consequat mauris nunc congue nisi. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Purus gravida quis blandit turpis cursus in hac habitasse platea. Nulla aliquet porttitor lacus luctus accumsan tortor. Ut tristique et egestas quis ipsum suspendisse ultrices gravida.</p>
</div>
<div id="footer">
<h1>The footer element</h1>
</div>
</div>
I have a fixed header & a div inside the container. The div which is inside the container overlaps the header. I tried position: relative but it is not giving me the result as expected!
#syllabus_container {
background:#ADC;
left:0;
position:relative;
width:100%;
top:0;
}
Here is the live effect of my code!
pleas use below css, use z index to show it on top, you can check on below link
https://www.w3schools.com/code/tryit.asp?filename=FLOPWZTB16T2
#header_container {
background: #ABC;
height: 75px;
left: 0;
position: fixed;
width: 100%;
top: 0;
z-index: 99999999999999;
}
Check the code below.Hope it helps
.header{
position:fixed;
width:100%;
top:0;
left:0;
height:70px;
background:pink;
text-align:center;
color:#fff;
font-size:20px;
z-index:9;
}
.content{
margin-top:72px;
}
<div>
<div class="header">The header</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum lectus, rhoncus pretium lectus ac, laoreet dignissim nibh. Proin eleifend malesuada dapibus. Nunc quis arcu id nibh posuere sodales eu ac orci. Morbi bibendum efficitur odio vitae venenatis. In nec viverra tortor. Suspendisse non nibh ut sem commodo faucibus ut ut leo. Cras tincidunt ullamcorper nibh, ac bibendum leo volutpat ut.
Sed id ultrices ex. Aenean id laoreet mi. Aenean viverra sit amet risus sed tristique. Phasellus varius massa eu vestibulum euismod. Etiam vel velit ut purus ornare accumsan. Maecenas vulputate eu tellus a egestas. Vivamus maximus imperdiet risus, non posuere ante lobortis sed. In faucibus aliquam odio. Maecenas et mollis purus, at luctus lectus. In eget nibh quam. Duis in tempor nisl, ac imperdiet erat. Nam condimentum consectetur sapien. Nullam non urna vitae est convallis rhoncus vitae nec enim.
Phasellus ullamcorper egestas metus, in imperdiet magna blandit id. Fusce eu magna in ante aliquam congue. Pellentesque euismod turpis eu lorem rhoncus, sed condimentum elit cursus. Suspendisse at feugiat erat. Duis malesuada ligula sed felis rutrum mattis. Donec ac magna dictum, vehicula tellus ut, tristique ligula. Quisque quis congue sapien, eu laoreet tortor. Pellentesque commodo metus diam, non egestas quam dignissim nec. Curabitur non velit purus. Pellentesque mauris velit, imperdiet vel imperdiet quis, viverra ut leo. Ut eget malesuada libero. Sed tristique metus commodo fermentum tristique. Cras accumsan massa vitae dolor scelerisque, eu tincidunt mauris venenatis. Ut in purus vitae risus aliquam mattis. Cras cursus maximus elit, tempor pretium urna congue in.
Nulla facilisi. Sed feugiat elementum enim, et posuere dolor tempus pharetra. Nulla a orci eget lorem tincidunt aliquam id id nulla. Morbi facilisis eget elit in volutpat. Aliquam sed luctus enim, id aliquam nunc. Pellentesque eu elit dui. Proin ornare tempor eros, vitae faucibus sapien placerat a. Mauris volutpat feugiat est a finibus. Phasellus in mattis diam. Mauris vitae dignissim dui. Proin tincidunt arcu sit amet pretium tristique. Mauris ullamcorper at neque eget euismod. Nam massa massa, mattis quis risus vitae, elementum lobortis justo.
Nam eu est non dui molestie fringilla. Aliquam ullamcorper elit ligula, quis vestibulum lectus auctor vitae. Nulla a blandit sem. Nulla mauris nisl, molestie sed dolor nec, feugiat imperdiet orci. Ut commodo at metus in gravida. Vivamus sed sapien auctor, molestie est in, ullamcorper diam. Mauris molestie quam non venenatis laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a tempus erat. Maecenas dui orci, malesuada a vulputate ac, egestas ac ante. In dolor quam, ornare eget tincidunt sit amet, mattis at diam. Etiam nec malesuada magna.
Nam vitae risus mi. Maecenas faucibus purus sed arcu posuere, ut eleifend risus facilisis. Integer suscipit, tortor eu malesuada porttitor, tortor sem laoreet enim, vitae tincidunt velit nisl sed turpis. Praesent magna velit, auctor vel mattis gravida, fermentum ut turpis. Vivamus nisl dui, ullamcorper nec convallis vitae, suscipit ut mi. Curabitur condimentum in leo congue consectetur. Praesent sit amet massa hendrerit, pretium lectus quis, egestas augue. Mauris ac pretium purus, eget fermentum nulla. Vivamus sed est massa. Praesent vitae nisl sed nisl porta vestibulum. Donec maximus facilisis urna, nec semper urna suscipit quis. In nisi turpis, suscipit eu elit vitae, consectetur lobortis mi.
Proin ut orci diam. Ut venenatis eget leo nec mollis. In ut lorem vel dolor mollis feugiat. Pellentesque quam risus, aliquet vitae ultricies id, sodales eu risus. Vestibulum sodales non sapien a cursus. Aenean sapien nunc, aliquet in metus quis, viverra mollis nisl. Pellentesque eu hendrerit lacus, id consequat enim. Nulla lectus erat, congue non turpis in, ornare dapibus ex. In in molestie mi. Nunc sagittis, ante nec finibus aliquam, sem est molestie ipsum, at interdum dolor neque nec dolor. Cras et lectus accumsan, volutpat felis sed, vehicula enim.
Sed vitae lacinia neque. In eleifend ex vestibulum sem gravida, vitae pellentesque mi laoreet. Nulla placerat mauris at viverra pulvinar. Nunc ut ante ante. Aliquam in vehicula diam. Sed mauris neque, porta vitae sagittis vel, dapibus sed ligula. Mauris magna orci, maximus ac dictum eget, auctor vitae nisl. Vestibulum hendrerit sem vitae mi cursus, quis consectetur est hendrerit. Sed id metus fringilla, mattis est vel, cursus ligula. Sed non auctor lorem, at facilisis ipsum. Mauris venenatis accumsan lacus, et ornare purus cursus at. Suspendisse lacinia porttitor tincidunt. Sed vitae diam leo. Pellentesque eu malesuada libero. Cras varius ultrices augue, at ullamcorper nunc tristique non.
Curabitur et molestie justo. Pellentesque et neque quis risus efficitur porttitor at eget odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elit libero, dignissim quis rhoncus sed, aliquam non ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis erat tempus pretium tempus. Ut vehicula ipsum leo, vehicula dignissim dui dignissim et. Vivamus et lacinia magna.
Integer a diam purus. Maecenas condimentum quam convallis tincidunt vestibulum. Proin vestibulum ut leo elementum hendrerit. Sed diam mi, vehicula sed auctor sit amet, fringilla vitae augue. Curabitur magna eros, maximus et erat et, sodales accumsan tellus. Sed sagittis felis facilisis dolor euismod, ut dictum nulla convallis. Sed massa nulla, sodales malesuada pellentesque sagittis, vehicula id ligula. Nunc bibendum, odio sit amet suscipit porttitor, dui sapien consectetur libero, in ultrices justo dolor ac nulla. Cras gravida orci nec leo aliquam maximus. Vestibulum quis lobortis sapien. Integer pharetra elit enim, a hendrerit leo porta a. Phasellus efficitur enim vitae laoreet posuere. Nullam eu quam pellentesque, commodo enim a, venenatis turpis. Donec pulvinar eleifend urna, in tincidunt lorem imperdiet ut.
Nam id orci sit amet ante aliquam tincidunt ut vel nisi. Fusce ornare nibh lacus, non sagittis arcu lobortis eu. Nulla purus dui, viverra in sodales vitae, commodo at odio. Aliquam dignissim lacus quis velit fringilla ultrices. Aliquam nisi lectus, consequat quis risus et, pulvinar malesuada nisl. Cras lobortis magna id volutpat imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget porta lacus, quis condimentum turpis.
In vitae porttitor purus. Aliquam ullamcorper metus eget urna maximus, non viverra mi tempor. Proin elit nisi, cursus a blandit vitae, dignissim in lorem. Vestibulum sollicitudin tellus placerat porttitor molestie. In hac habitasse platea dictumst. Nulla venenatis tortor sit amet ex venenatis, in consequat quam dictum. Donec pellentesque nunc et ipsum fringilla, ac lobortis risus sagittis.
Morbi pretium, nibh eu fermentum porta, nunc diam sagittis urna, sed rhoncus purus mi at magna. Nam pulvinar, justo a efficitur ultrices, arcu libero finibus massa, nec blandit nisi ipsum sed neque. Integer venenatis purus velit, nec malesuada ipsum iaculis nec. Cras consequat orci orci, ac aliquam dui laoreet sed. Fusce feugiat ligula in dapibus rhoncus. In sed suscipit arcu. Nam varius varius orci, id dictum urna pellentesque finibus. Phasellus non ex vitae diam tristique egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum finibus quam nec ligula iaculis, vitae maximus nulla aliquet. Nullam faucibus lacinia sollicitudin. Ut hendrerit cursus velit, et vestibulum elit sagittis nec.
Morbi tempor commodo eros ac posuere. Nunc rhoncus tempus neque, eget laoreet mi aliquam at. Maecenas eget metus finibus, fringilla enim pellentesque, rutrum ante. Donec nec mollis sem. Maecenas in ante malesuada, molestie felis eu, euismod neque. Nam dui magna, gravida non orci vel, suscipit pharetra nulla. Pellentesque in sem porta, auctor arcu ut, tincidunt diam. Aenean commodo massa ut lectus mollis viverra. Praesent ultrices ac lorem in aliquet. Aenean interdum, nisl quis hendrerit venenatis, arcu est placerat felis, a mattis ligula justo ut ligula. Sed dictum felis tellus, id vulputate mauris pellentesque sit amet. Vivamus at turpis iaculis, dictum eros at, pellentesque magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt sapien in tincidunt rutrum. Maecenas tincidunt lacus at est scelerisque, vel laoreet urna viverra.
Etiam aliquam, elit nec dictum auctor, purus libero sollicitudin erat, nec malesuada mi ex at massa. Cras ac lorem sed nibh dignissim lobortis. Quisque auctor consectetur enim sit amet ultricies. Nullam nec mauris nibh. Morbi at venenatis neque. Maecenas velit nisi, sodales non lorem ac, pellentesque sodales justo. Morbi sed placerat diam, ut tristique arcu. Aenean sapien risus, ultrices quis porttitor commodo, elementum vestibulum lacus. Phasellus eleifend in orci in feugiat. Morbi iaculis, ex sed sollicitudin eleifend, neque tellus sodales metus, a elementum dui ipsum id massa. Suspendisse cursus ut quam id consectetur. Suspendisse potenti. In eu libero est. In vulputate dictum lacus, quis sodales nulla iaculis quis. Nullam sodales mollis tortor, at vulputate augue accumsan sed. Donec sagittis massa enim, eget laoreet arcu tristique eu.
</div>
</div>
I have a header that I need to fixed to top and change it's background while scroll down. Do I need to use jQuery? I tried to use position:fixed but it's not working properly.
Here are my code samples,
header {
padding: 20px 0;
position: fixed;
}
.logo-div {
margin: 30px 0;
}
<header>
<div class="header-panel">
<div class="col-xs-6 col-md-4 col-sm-4 logo-div">
<img id="headerLogo" src="images/logo.png" alt="logo">
</div>
<div class="col-xs-6 col-md-5 col-sm-6 menu pull-right">
<nav class="navbar navbar-default pull-right">
<div class="container-fluid">
<div class=" navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="">Sign In <i class="fa fa-user-o user-icon" aria-hidden="true"></i></li>
<li>Retrieve Quotes</li>
<li>
<i class="fa fa-bars menu-icon" aria-hidden="true"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
</header>
Original look.
It just looks this way now.
You can use position: fixed; on the header, and use this function:
$(document).scroll(function() {
if($(window).scrollTop() != 0) {
$("header").css('background-color', 'transparent');
}
if($(window).scrollTop() == 0) {
$("header").css('background-color', 'darkgrey');
}
});
To change the header colour if the div's not at the top.
$(document).scroll(function() {
if($(window).scrollTop() != 0) {
$("header").css('background-color', 'transparent');
}
if($(window).scrollTop() == 0) {
$("header").css('background-color', 'darkgrey');
}
});
header {
height: 50px;
background-color: darkgrey;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
div {
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>stuff stuff</header>
<div id="scrollable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet ultricies sapien, a volutpat risus. In nec tempus diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed et neque erat. Etiam pulvinar metus augue, nec facilisis
ipsum semper vitae. Maecenas tincidunt feugiat ex, sit amet eleifend orci placerat vel. Vivamus ac ullamcorper ipsum, vehicula lacinia lacus. Nam auctor, nisi sit amet vehicula fringilla, ex orci aliquam neque, in fermentum velit diam ac purus. Nunc
sed efficitur dui. Curabitur enim metus, rutrum ut mattis non, molestie a nisi. Vivamus non fermentum purus. Integer ornare enim ut commodo scelerisque. Cras tincidunt tortor feugiat libero facilisis mattis. Etiam facilisis est eu massa bibendum porttitor.
Proin tincidunt orci ut pellentesque euismod. Donec pretium velit ac dolor rhoncus, eu scelerisque nisl blandit. Pellentesque dapibus et lacus auctor tincidunt. Quisque sit amet ullamcorper dolor. Cras scelerisque congue vehicula. Nam aliquet suscipit
ex, id pulvinar augue suscipit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque bibendum, turpis eget suscipit scelerisque, diam mi facilisis quam, et vehicula nisi nisl faucibus dui. Aenean id malesuada velit. Sed pellentesque,
nulla at pulvinar fringilla, augue neque suscipit augue, non porta nulla erat in leo. Nunc sollicitudin dolor quis posuere lobortis. Donec at aliquam neque. Integer nec urna odio. Suspendisse maximus molestie sem pharetra elementum. Vestibulum at elit
id lorem venenatis finibus. Sed luctus nulla dignissim mauris euismod, quis blandit augue rutrum. Nulla facilisi. Nullam bibendum arcu risus, nec scelerisque nisl pharetra ut. Praesent consectetur eleifend lectus, in ornare ipsum. Cras aliquam quis
urna quis commodo. Cras fermentum lacinia risus, quis fringilla turpis vestibulum eu. Pellentesque luctus iaculis efficitur. Nam et mauris condimentum, blandit ante quis, vulputate sapien. Mauris mollis odio id dolor pharetra, nec volutpat nibh cursus.
Nam sed lacinia libero, eget hendrerit elit. Donec laoreet sapien non dolor congue, nec pellentesque libero semper. Vestibulum efficitur at ipsum vitae ultricies. Ut nec neque vestibulum, varius augue quis, feugiat libero. Sed feugiat lectus id rhoncus
laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac malesuada justo, pharetra maximus nunc. Nam hendrerit neque vel blandit gravida. Aenean congue facilisis elit, a eleifend quam pharetra nec.
Integer id luctus ipsum, id aliquet nunc. Integer pulvinar iaculis eros, ultrices ullamcorper tellus congue in. Suspendisse blandit ullamcorper ipsum, sed cursus nulla lobortis venenatis. Maecenas venenatis pretium diam, quis laoreet libero dictum eu.
Fusce elementum mattis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut cursus libero. Integer eget tempor dui, ut volutpat tortor. Sed sodales dolor a leo ultricies, id mollis augue convallis. Duis at egestas lectus.
Nunc ultricies magna quis justo euismod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet ultricies sapien, a volutpat risus. In nec tempus diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed et neque
erat. Etiam pulvinar metus augue, nec facilisis ipsum semper vitae. Maecenas tincidunt feugiat ex, sit amet eleifend orci placerat vel. Vivamus ac ullamcorper ipsum, vehicula lacinia lacus. Nam auctor, nisi sit amet vehicula fringilla, ex orci aliquam
neque, in fermentum velit diam ac purus. Nunc sed efficitur dui. Curabitur enim metus, rutrum ut mattis non, molestie a nisi. Vivamus non fermentum purus. Integer ornare enim ut commodo scelerisque. Cras tincidunt tortor feugiat libero facilisis mattis.
Etiam facilisis est eu massa bibendum porttitor. Proin tincidunt orci ut pellentesque euismod. Donec pretium velit ac dolor rhoncus, eu scelerisque nisl blandit. Pellentesque dapibus et lacus auctor tincidunt. Quisque sit amet ullamcorper dolor. Cras
scelerisque congue vehicula. Nam aliquet suscipit ex, id pulvinar augue suscipit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque bibendum, turpis eget suscipit scelerisque, diam mi facilisis quam, et vehicula nisi nisl faucibus
dui. Aenean id malesuada velit. Sed pellentesque, nulla at pulvinar fringilla, augue neque suscipit augue, non porta nulla erat in leo. Nunc sollicitudin dolor quis posuere lobortis. Donec at aliquam neque. Integer nec urna odio. Suspendisse maximus
molestie sem pharetra elementum. Vestibulum at elit id lorem venenatis finibus. Sed luctus nulla dignissim mauris euismod, quis blandit augue rutrum. Nulla facilisi. Nullam bibendum arcu risus, nec scelerisque nisl pharetra ut. Praesent consectetur
eleifend lectus, in ornare ipsum. Cras aliquam quis urna quis commodo. Cras fermentum lacinia risus, quis fringilla turpis vestibulum eu. Pellentesque luctus iaculis efficitur. Nam et mauris condimentum, blandit ante quis, vulputate sapien. Mauris mollis
odio id dolor pharetra, nec volutpat nibh cursus. Nam sed lacinia libero, eget hendrerit elit. Donec laoreet sapien non dolor congue, nec pellentesque libero semper. Vestibulum efficitur at ipsum vitae ultricies. Ut nec neque vestibulum, varius augue
quis, feugiat libero. Sed feugiat lectus id rhoncus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac malesuada justo, pharetra maximus nunc. Nam hendrerit neque vel blandit gravida. Aenean
congue facilisis elit, a eleifend quam pharetra nec. Integer id luctus ipsum, id aliquet nunc. Integer pulvinar iaculis eros, ultrices ullamcorper tellus congue in. Suspendisse blandit ullamcorper ipsum, sed cursus nulla lobortis venenatis. Maecenas
venenatis pretium diam, quis laoreet libero dictum eu. Fusce elementum mattis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut cursus libero. Integer eget tempor dui, ut volutpat tortor. Sed sodales dolor a leo ultricies,
id mollis augue convallis. Duis at egestas lectus. Nunc ultricies magna quis justo euismod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet ultricies sapien, a volutpat risus. In nec tempus diam. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Sed et neque erat. Etiam pulvinar metus augue, nec facilisis ipsum semper vitae. Maecenas tincidunt feugiat ex, sit amet eleifend orci placerat vel. Vivamus ac ullamcorper ipsum, vehicula lacinia lacus. Nam auctor,
nisi sit amet vehicula fringilla, ex orci aliquam neque, in fermentum velit diam ac purus. Nunc sed efficitur dui. Curabitur enim metus, rutrum ut mattis non, molestie a nisi. Vivamus non fermentum purus. Integer ornare enim ut commodo scelerisque.
Cras tincidunt tortor feugiat libero facilisis mattis. Etiam facilisis est eu massa bibendum porttitor. Proin tincidunt orci ut pellentesque euismod. Donec pretium velit ac dolor rhoncus, eu scelerisque nisl blandit. Pellentesque dapibus et lacus auctor
tincidunt. Quisque sit amet ullamcorper dolor. Cras scelerisque congue vehicula. Nam aliquet suscipit ex, id pulvinar augue suscipit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque bibendum, turpis eget suscipit scelerisque,
diam mi facilisis quam, et vehicula nisi nisl faucibus dui. Aenean id malesuada velit. Sed pellentesque, nulla at pulvinar fringilla, augue neque suscipit augue, non porta nulla erat in leo. Nunc sollicitudin dolor quis posuere lobortis. Donec at aliquam
neque. Integer nec urna odio. Suspendisse maximus molestie sem pharetra elementum. Vestibulum at elit id lorem venenatis finibus. Sed luctus nulla dignissim mauris euismod, quis blandit augue rutrum. Nulla facilisi. Nullam bibendum arcu risus, nec scelerisque
nisl pharetra ut. Praesent consectetur eleifend lectus, in ornare ipsum. Cras aliquam quis urna quis commodo. Cras fermentum lacinia risus, quis fringilla turpis vestibulum eu. Pellentesque luctus iaculis efficitur. Nam et mauris condimentum, blandit
ante quis, vulputate sapien. Mauris mollis odio id dolor pharetra, nec volutpat nibh cursus. Nam sed lacinia libero, eget hendrerit elit. Donec laoreet sapien non dolor congue, nec pellentesque libero semper. Vestibulum efficitur at ipsum vitae ultricies.
Ut nec neque vestibulum, varius augue quis, feugiat libero. Sed feugiat lectus id rhoncus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac malesuada justo, pharetra maximus nunc. Nam hendrerit
neque vel blandit gravida. Aenean congue facilisis elit, a eleifend quam pharetra nec. Integer id luctus ipsum, id aliquet nunc. Integer pulvinar iaculis eros, ultrices ullamcorper tellus congue in. Suspendisse blandit ullamcorper ipsum, sed cursus
nulla lobortis venenatis. Maecenas venenatis pretium diam, quis laoreet libero dictum eu. Fusce elementum mattis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut cursus libero. Integer eget tempor dui, ut volutpat tortor.
Sed sodales dolor a leo ultricies, id mollis augue convallis. Duis at egestas lectus. Nunc ultricies magna quis justo euismod tempor.
</div>
Try using a flexbox to created a fixed header with a scrollable body.
Stuff like fixed and absolute should really be for stuff that you don't mind overlapping other stuff. Like small icons that scroll back up to the top, etc.
.flex {
display: flex;
flex-direction: column;
height: 100vh;
}
#header {
height: 100px;
background-color: red;
}
#body {
flex: 1;
background-color: blue;
overflow: auto;
}
<div class="flex">
<div id="header">
stuff
</div>
<div id="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis augue et ligula porta auctor. Donec ac metus sollicitudin, tristique arcu nec, consectetur orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dictum leo quis odio sollicitudin ultrices. Praesent urna ligula, accumsan vel imperdiet in, sagittis at lorem. Integer luctus consectetur vestibulum. Etiam sollicitudin facilisis sem, pretium facilisis sem placerat ut. Donec sit amet lacinia dolor, varius mattis mi. Donec sed est pharetra, rhoncus tortor non, fringilla dolor. Praesent elit magna, semper sed commodo vitae, auctor id nisi. Phasellus vel dignissim orci. Maecenas tellus lacus, sollicitudin at felis et, facilisis euismod nibh. Donec a leo tellus.
Fusce dolor erat, malesuada at sapien a, pretium mattis sapien. Morbi ut risus ut diam cursus rhoncus. Fusce eu molestie ipsum, venenatis lobortis metus. Vivamus eget egestas lectus. Proin iaculis porta nibh, at ullamcorper augue aliquam nec. Sed faucibus nisl nec risus porttitor eleifend. Donec ultricies nulla ac metus consectetur, sit amet faucibus risus dignissim. Vestibulum vitae nisi pellentesque, vulputate nibh sed, ullamcorper mi. Nunc ultricies nisl at nulla sollicitudin ullamcorper. Vivamus egestas placerat tempus. Nam fermentum eu felis non semper. Aliquam nunc justo, viverra ac eleifend ut, pulvinar vitae risus. Vestibulum sollicitudin non ipsum in tempus.
Mauris ut massa eget mauris varius faucibus. Suspendisse tellus felis, posuere vel accumsan a, molestie venenatis libero. Sed vel nunc in libero varius dapibus consectetur a sapien. Duis sagittis pellentesque sem, eu bibendum odio consectetur aliquet. Aliquam et purus risus. Nulla a posuere libero. Sed aliquet convallis efficitur. Curabitur aliquam, turpis id tempor molestie, est quam egestas ipsum, at feugiat nunc nulla sed elit. Aliquam venenatis convallis lacus, in ornare erat dignissim vel. Morbi ac rhoncus leo, in feugiat massa. Suspendisse non velit in dolor lacinia vulputate eu a ex. Ut tristique rhoncus consequat. Quisque malesuada aliquet massa, at viverra odio sagittis eu. Duis posuere a velit quis porttitor. Phasellus eu libero ultricies, tincidunt arcu placerat, commodo quam. Donec quis orci laoreet, auctor ligula at, dictum mi.
Etiam dictum nisl orci, sit amet venenatis purus viverra ut. Donec hendrerit felis id convallis placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquam lacus ut nisi feugiat, et ultricies augue consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In tincidunt metus a justo placerat porta. Donec porta id est in scelerisque. Cras semper massa neque, vitae ultrices mauris pulvinar id. Fusce eu luctus neque, ac tincidunt eros. Nullam eleifend tincidunt arcu a cursus. Curabitur dictum semper augue, euismod varius neque vestibulum vitae. Nam tortor lectus, tempus non auctor id, sollicitudin nec elit. Duis ut odio et tortor maximus varius. Sed fringilla sit amet ipsum hendrerit cursus. Duis id urna dolor.
Mauris tincidunt odio non maximus condimentum. Vivamus velit enim, interdum eget feugiat nec, tincidunt sed sem. Nullam imperdiet erat urna, ut maximus odio bibendum eu. Morbi porttitor ante eget malesuada hendrerit. Nulla pulvinar risus posuere, placerat ligula ac, pharetra neque. Vivamus id lorem id risus ullamcorper sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse luctus, velit vitae tristique consectetur, lorem urna rutrum mi, vitae tristique est velit posuere diam. In hac habitasse platea dictumst. Fusce dictum lobortis metus, et posuere arcu venenatis vel.
Nunc odio mi, varius at vulputate in, accumsan ac justo. Nunc vel blandit odio. Vivamus et suscipit velit, a dignissim libero. Sed vel velit ante. Mauris scelerisque, elit at tempor eleifend, orci elit placerat nisl, ut suscipit augue turpis et ipsum. Pellentesque efficitur sapien mauris, non venenatis justo commodo eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sed nibh nec sem interdum tristique quis sit amet massa. Suspendisse vel mauris magna. Integer id sapien ac libero lacinia ullamcorper nec eget enim. Nullam eget nunc non lectus congue condimentum. Etiam fermentum consectetur felis, et pulvinar nibh iaculis id. Ut felis lacus, consequat id mattis eu, volutpat quis urna. Sed nisi neque, malesuada quis nibh sit amet, aliquam vehicula tellus. Cras pharetra nisi nec metus pretium ullamcorper in quis leo. Etiam mi diam, venenatis non lorem a, suscipit tempor est.
Sed sit amet finibus ligula. Cras sit amet magna et nisi elementum tristique eget quis metus. Aenean efficitur ac sem vulputate efficitur. Nullam felis nibh, dictum ac iaculis non, molestie eu urna. Donec arcu turpis, tempor sed risus at, pharetra varius elit. Praesent cursus justo metus, at tristique ligula suscipit at. Aenean vel pellentesque eros. Aenean sit amet nisl vehicula, posuere felis in, egestas lectus. Praesent sollicitudin dictum diam sed lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi dapibus scelerisque lorem, eget vehicula tellus condimentum eget. Phasellus scelerisque leo nec risus imperdiet molestie. Suspendisse nec lacus at magna tristique pellentesque nec vel libero.
Proin in finibus erat. Ut sodales urna non purus gravida luctus. Quisque imperdiet eros scelerisque felis auctor ultrices. Phasellus lacinia enim et ligula sollicitudin vestibulum. Quisque semper libero quis mauris feugiat volutpat. Mauris ac eleifend diam, ac semper risus. Duis eget luctus neque, at molestie nisl. Nulla volutpat maximus vulputate. Nunc pretium velit in neque vestibulum, blandit lacinia augue efficitur. Maecenas sem sem, condimentum sed dolor vulputate, gravida lobortis dolor. Aenean efficitur nibh vitae lacus gravida ornare. Mauris sagittis ex lacus, ut congue augue interdum in. Morbi nec congue odio. Quisque eleifend mi at convallis interdum. Nunc at congue dolor, quis blandit nunc. Maecenas molestie sollicitudin sem in scelerisque.
Donec sed pellentesque urna, eu fringilla tellus. Nullam at fermentum eros. Nam viverra est at est mattis, lobortis volutpat massa accumsan. Nunc vel faucibus risus. Vivamus a urna hendrerit, ullamcorper tellus aliquet, sagittis felis. Sed eget nisl tempus, congue nisi nec, accumsan purus. Donec molestie metus eget lorem imperdiet facilisis. Donec vulputate ut sem rutrum tincidunt. Nulla at lectus at dui imperdiet tincidunt non blandit enim. Vivamus accumsan risus eget porttitor aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla maximus blandit mauris, vel consectetur leo auctor et. Mauris non diam a neque tincidunt euismod. Donec non augue porttitor, imperdiet metus eget, laoreet ex. Nulla ut accumsan magna, id venenatis est. Nunc tempus dolor non velit vestibulum, sit amet finibus risus pulvinar. Sed egestas dapibus turpis, eu scelerisque quam sollicitudin id. Vivamus libero magna, congue quis volutpat eget, vestibulum nec ex. Curabitur auctor eros in ultrices scelerisque. Vestibulum lacinia hendrerit euismod. Nam ut ultricies eros. Mauris sed tortor mi. Mauris dolor metus, euismod sit amet quam sed, efficitur dapibus risus. Quisque aliquet molestie nisl id semper. Sed venenatis augue vitae cursus volutpat. In id nulla vel quam vehicula ornare.
</div>
</div>
I am having some large trouble with my website resizing it self to fit a phone dimension i have tried everything out there on the net and cant find anything that fixes this problem.
I currently have a problem where when i open this link on my phone LINK HERE
It puts a black space at bottom of page and then shows my logo repeated again for some reason.
Could anyone help with this?
Thanks
.wrapInner {
text-align: center;
}
.Contents>.Logo {
margin: 15% 0 0 0;
}
.Contents>.SearchInput {
margin: 0 auto;
}
Try this to start. You will need to replace the margins with these ones.
And stop using fixed widths you have widths set to amount of pixels everywhere.
Add this to your body
body{
width: 100%
}
you will also need to adjust it in your media quires.
Then go down the list and set all your containers with widths set to 100% instead of what you got them set to...
I'm going to guess that this will work for you because it seems to be what your problem is. The idea is that it will fix the width of a webpage to the device's width. (By the way, the Lorem Ipsum Dolor stuff is just to show that the width remains the same as the device's width no matter what, and the height is all that changes.)
var deviceWidth;
function checkDimensions() {
deviceWidth = window.innerwidth;
document.getElementById('body').style.width = deviceWidth + "px";
}
<body id="body" onLoad="checkDimensions()">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet neque, eleifend dignissim dolor. Suspendisse aliquam enim ac gravida feugiat. Donec congue erat a dignissim egestas. Praesent accumsan risus eros, nec pulvinar ipsum aliquet id. Etiam vehicula consequat dolor at accumsan. Morbi tincidunt ac odio quis gravida. Nam dictum vel felis maximus vestibulum. Phasellus tincidunt suscipit mattis. Quisque pharetra dui a ultricies dictum.
Aliquam egestas ornare ex sit amet mattis. Etiam ullamcorper libero eu tellus rutrum cursus. Aenean sit amet metus augue. Proin feugiat augue et metus porta feugiat. Duis feugiat nibh sit amet risus tempor, vel pellentesque tellus vehicula. Nunc in pulvinar ex, eget viverra est. Vivamus suscipit ante sit amet massa mattis lacinia. Nullam quis ultricies diam. Vivamus ut lacus a enim egestas imperdiet vel a mauris. Ut porttitor vitae sapien nec sodales. Donec hendrerit magna elit, vitae interdum mauris vehicula nec. Quisque at tempor odio. Nulla non maximus lacus. Vestibulum lacinia felis felis, ac feugiat lectus vehicula eu. Sed semper leo porta odio posuere interdum. Ut et enim pharetra eros commodo scelerisque sit amet sed leo.
Nam lacinia ex nec faucibus mattis. Integer eget lobortis odio. Phasellus quis turpis sapien. Nam vulputate est ut enim imperdiet, id tincidunt elit tincidunt. Sed ligula tortor, lobortis et ligula quis, venenatis efficitur neque. Donec massa est, porta quis consectetur eget, accumsan vel metus. Ut ut enim sit amet orci sodales consequat. Phasellus sed purus ac tellus pellentesque tristique. Curabitur porttitor consequat varius. Donec vulputate purus pretium orci pretium laoreet. Proin ac tortor eget sem pharetra viverra. Donec finibus maximus risus.
Sed suscipit lacinia leo, et fermentum sem gravida eget. Mauris at luctus nibh, at malesuada mauris. Praesent malesuada elit nec sollicitudin eleifend. Curabitur in lobortis magna. Sed dictum odio ultricies libero rhoncus pharetra. Sed vel euismod risus. Ut lobortis nibh ipsum, quis lobortis elit suscipit ut. Fusce finibus rutrum faucibus. Proin suscipit vitae nisi at imperdiet. Phasellus rutrum tortor tempor, blandit purus non, congue metus. Donec sodales lacus ut magna dapibus consequat. Pellentesque consectetur ante in elit varius pulvinar.
Morbi mollis velit sed nibh tristique pretium. Aenean consequat velit vel auctor vestibulum. Nam erat ex, molestie pharetra nibh eget, venenatis bibendum tellus. Mauris malesuada tortor fringilla elit gravida, quis porta metus tincidunt. Fusce sit amet volutpat tellus. In vitae tortor id orci placerat tincidunt. Mauris velit felis, feugiat eu ante imperdiet, congue facilisis magna. Donec ultrices lacinia consectetur. Integer eu sollicitudin nisi, ac facilisis velit.
Etiam egestas dolor sed sagittis viverra. In id velit pellentesque, vestibulum lectus ac, vestibulum arcu. Nullam lacinia facilisis quam, et pretium lectus fringilla nec. Vivamus efficitur mauris mi, lacinia ornare justo aliquet in. Cras massa neque, finibus nec quam ut, porta aliquet neque. Aenean efficitur dui libero, et fermentum purus lobortis a. Nulla et enim vel justo laoreet eleifend in vitae erat. Aliquam consequat nulla nunc, eu aliquet eros sollicitudin sed.
Vestibulum vel ipsum nec enim rhoncus porta. In pretium, nibh ut feugiat fringilla, ante arcu tristique risus, ultricies venenatis urna urna ut eros. Fusce molestie condimentum magna, quis blandit justo viverra ac. Cras ut leo eu nisi cursus ullamcorper sit amet vitae neque. Fusce non dolor sodales, commodo enim id, sodales tortor. Nulla suscipit ornare tincidunt. Praesent vitae felis enim. Pellentesque semper velit dictum, dictum nulla vitae, finibus velit. Integer viverra orci non odio congue, et elementum justo semper. Phasellus sollicitudin elit in justo facilisis, vel facilisis tortor malesuada. Curabitur ac diam vel ligula rutrum commodo sed in est. Nunc ornare finibus dui a condimentum. Nunc faucibus commodo ipsum, eget viverra nibh.
Vivamus faucibus euismod vehicula. Phasellus non congue quam. Pellentesque at tellus ut augue pharetra ullamcorper. Donec sed finibus lacus, quis bibendum purus. Etiam accumsan tristique odio, vitae accumsan est pellentesque in. Sed maximus tellus quis est tristique, quis vulputate mauris cursus. Integer venenatis sollicitudin enim eget sagittis. Mauris et sollicitudin arcu, a faucibus felis. Cras sed vehicula massa. Aliquam erat volutpat.
Nunc tristique fringilla mauris eget laoreet. Nulla iaculis eros eu arcu malesuada posuere. Maecenas eleifend viverra sapien nec blandit. Duis efficitur, est eget scelerisque eleifend, eros ante dignissim velit, eu porttitor magna ligula in felis. Nullam varius efficitur faucibus. Sed sodales libero dolor, et interdum tellus venenatis ac. Morbi quis vestibulum mi, in malesuada leo. Quisque pharetra convallis dolor non euismod. Phasellus vestibulum nec massa eget eleifend. Proin sed turpis venenatis odio molestie aliquam. Nulla eu urna eu risus ultrices tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Quisque feugiat dolor turpis, eu porttitor sapien auctor eget. Aliquam iaculis diam justo, ac fermentum magna rhoncus non. Nunc facilisis accumsan fringilla.
Duis blandit enim arcu, nec ultricies tellus posuere luctus. Cras sed volutpat ipsum. Vestibulum fringilla, purus sit amet pulvinar euismod, risus nisl vehicula nunc, et bibendum lectus est ac ligula. Praesent a magna sed nisl porta luctus. Praesent sollicitudin efficitur tempor. Curabitur iaculis justo eu risus tempor, vitae commodo nibh dapibus. Nunc quis interdum ex. Etiam ac velit ullamcorper massa luctus condimentum. Sed fermentum, justo non facilisis malesuada, nisi justo egestas sapien, porta maximus sapien urna ut diam. Sed egestas hendrerit diam eget porttitor. Nulla congue magna sem, id tempor lorem vestibulum eu.
In placerat, mi at egestas suscipit, nisl nisl lacinia dui, eget aliquet est nibh at tellus. Maecenas in porttitor magna. Donec id orci at diam dictum semper. Curabitur consectetur interdum tellus nec efficitur. Nam iaculis justo odio, quis porta enim aliquet vitae. Vestibulum ac molestie felis. Proin eu lorem id ex ultrices accumsan et sit amet sem. Mauris sit amet neque vitae elit faucibus varius. Vestibulum nec tincidunt sapien, ac semper metus. Suspendisse a risus at nisl rhoncus porttitor vel sit amet est. Donec mattis pulvinar dui a feugiat.
Duis a dolor in tellus mollis ullamcorper. Morbi dapibus maximus tortor, eu volutpat nisi dapibus quis. Nam sodales eget odio quis elementum. Fusce condimentum tellus vitae lorem rhoncus viverra. Duis quis condimentum quam. Donec vel interdum nisi, et consectetur mi. Vivamus eleifend nisl nec pulvinar fringilla. Quisque finibus, orci sit amet placerat imperdiet, sapien eros rutrum neque, efficitur vehicula lorem metus nec massa.
In facilisis bibendum nisi sit amet interdum. Phasellus tellus arcu, molestie ac arcu sed, mollis consectetur eros. Aliquam dignissim vestibulum ornare. Mauris iaculis justo pellentesque leo placerat pharetra. Duis eget ornare nulla. Nam sed odio eu est malesuada bibendum. Aliquam eu ligula nibh. Suspendisse feugiat velit augue, commodo venenatis neque varius in. Maecenas vitae urna faucibus, consectetur tortor eu, pretium eros. Sed at pulvinar elit. Donec consequat ligula urna, ac tempus magna ultricies ac. Sed quis neque gravida, sodales lacus sit amet, ullamcorper arcu. In suscipit finibus nisl hendrerit finibus.
Nulla nec scelerisque lacus. Donec a diam vitae lorem consectetur laoreet a ac ex. Etiam vulputate purus turpis, nec ultrices ex gravida in. Ut laoreet laoreet molestie. Cras sed sodales lorem. Etiam orci mauris, aliquet vel diam id, semper aliquet urna. Sed porta nisl ac neque finibus, ac venenatis dui consectetur. Nullam at suscipit ex, nec porttitor erat. Ut vehicula imperdiet nulla, sed auctor quam eleifend et. Proin viverra arcu sit amet erat pretium molestie. In pellentesque, diam eu vulputate maximus, sapien ante egestas magna, vitae venenatis dui magna at libero. Praesent euismod dapibus tellus at sagittis. Curabitur pellentesque augue tellus, sit amet commodo lacus tempor id.
Proin pharetra laoreet purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet ex sed urna accumsan, tristique molestie magna vestibulum. Duis et odio felis. Nullam id mauris a ligula dignissim accumsan. Sed rhoncus arcu vitae iaculis pellentesque.
Maecenas placerat ac ante et semper. Donec iaculis mauris in leo lobortis, vitae maximus lacus fringilla. Nunc pharetra ligula sit amet dapibus ultrices. Aliquam erat volutpat. Curabitur lobortis a eros eu laoreet. Nulla rutrum quam ipsum, a tristique ligula ornare vitae. Nunc finibus nec nunc id egestas. Suspendisse pharetra rhoncus mauris, et suscipit urna dictum ac. Nunc pretium risus nec tincidunt viverra. Phasellus nisl purus, accumsan a mi et, commodo lobortis ante. Etiam lectus dui, fermentum et lacus sit amet, luctus interdum felis.
Phasellus aliquet diam dolor, sed pretium augue sollicitudin ut. Etiam fringilla diam eget libero vulputate aliquet. In tincidunt, quam dictum porta ullamcorper, nulla neque suscipit lacus, vel tempus ligula sapien a augue. Vivamus molestie a odio at tempor. Nullam id rhoncus neque. Vestibulum pellentesque commodo mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sagittis tincidunt pellentesque. Aliquam commodo risus vitae nisl facilisis dapibus.
Aenean viverra eleifend ligula, eu ullamcorper tortor tristique ut. Proin dignissim elementum aliquet. Pellentesque at turpis dolor. Quisque libero leo, fringilla eu lectus et, iaculis laoreet tortor. Nulla sollicitudin metus sit amet diam pretium, eget ullamcorper nisl scelerisque. Nullam ullamcorper molestie semper. Donec sit amet nisi a nibh dignissim mattis et sed neque. Pellentesque non mi non lectus blandit fringilla. Phasellus congue facilisis dapibus.
Integer sagittis orci sed tortor fermentum egestas. Vivamus ac varius nisl. Sed pulvinar rhoncus augue. Cras nec velit eleifend, lobortis augue in, cursus sem. Maecenas sed lacus pretium, consequat ipsum non, sodales nibh. Nulla et dolor vehicula elit posuere faucibus eget eget odio. Mauris eu est vel lacus consequat mollis vitae eu lacus. Sed vulputate nisi nisl, at rutrum diam volutpat quis. In augue odio, viverra et dui non, tincidunt eleifend dolor. Praesent hendrerit purus id gravida convallis.
Nulla maximus quis ipsum nec fermentum. Curabitur dapibus enim vitae semper pellentesque. Maecenas lobortis lobortis magna, ut porttitor felis dignissim eget. Morbi efficitur vehicula mi, vitae cursus ex viverra sed. Etiam imperdiet odio et ligula ultricies, sit amet vulputate nibh sodales. In sollicitudin, velit quis varius molestie, velit lacus sollicitudin velit, eu congue elit felis quis arcu. Pellentesque fermentum lacus eu urna maximus placerat. Vestibulum sem magna, iaculis nec neque vel, blandit mollis ex. Suspendisse a dui tellus. Nulla facilisi. Praesent varius tristique rhoncus. Mauris sed blandit mauris. Praesent ultrices velit id diam ornare dictum.</p>
</body>
how to fix the margin spaces on IE? Here the code.
IF you open this file on modern browser all working great and will have a space for 20px on the bottom. But in IE nothing space. Let me know the trick to fix this thing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Margin Auto</title>
<style type="text/css">
* { padding:0; margin:0; }
body { background:#333;}
#wrapper { width:800px; margin:20px auto 20px auto; padding:10px; background:#fff;}
p { line-height:18px; padding-bottom:20px;}
</style>
</head>
<body>
<div id="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue nisl a nisi ullamcorper lacinia. Vestibulum pulvinar porttitor laoreet. Maecenas feugiat tellus posuere dolor porttitor dignissim. Pellentesque vitae ligula nec velit egestas euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis hendrerit ligula at lobortis. Maecenas vel erat nisl. Duis eleifend ipsum et urna consectetur venenatis pharetra lectus sollicitudin. Phasellus adipiscing scelerisque lorem, et tristique nunc sagittis ut. Maecenas dui tellus, varius vel ultrices sit amet, fermentum quis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eget cursus eros. Aliquam erat volutpat. In odio risus, pellentesque a tempus in, condimentum et leo. Maecenas porttitor nisi eget justo vehicula accumsan. Sed tristique elementum fringilla. Nam nibh velit, aliquam ac tincidunt vitae, lacinia sodales elit. Pellentesque vitae lacus vel est feugiat vulputate non id velit. Nunc fringilla ullamcorper nunc, vel scelerisque lacus rutrum eget. Aenean at nulla at massa aliquet laoreet quis tincidunt dui.</p>
<p>Aliquam erat volutpat. Etiam aliquam lacus sit amet ipsum bibendum blandit. Vestibulum vitae purus a massa fermentum viverra. Sed eu magna massa, eu euismod dolor. Maecenas urna libero, ullamcorper a aliquam vitae, convallis nec mauris. Sed at vulputate libero. Donec bibendum mollis dapibus. Curabitur sed justo odio, ac mattis nunc. Vestibulum malesuada tellus at sapien euismod posuere et eget tortor. In hac habitasse platea dictumst. Nullam sit amet mi nulla, in vulputate est. Morbi ligula justo, tristique vitae consectetur ac, egestas non risus. In hac habitasse platea dictumst. Pellentesque odio mauris, euismod at ultrices blandit, vehicula cursus risus. Nullam eu metus at felis cursus luctus. Nulla facilisi. Nullam nec nisi quis tortor scelerisque luctus. Morbi feugiat, est id porttitor tincidunt, nunc sem euismod tellus, in pharetra velit tellus vel turpis.</p>
<p>Vestibulum risus sem, volutpat ut fringilla rhoncus, consequat sit amet tellus. Suspendisse vel elit ac urna eleifend tincidunt sit amet nec lacus. Proin non leo at est lobortis imperdiet quis sed justo. Fusce consequat sagittis arcu et iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam aliquet nulla ultrices augue bibendum ut dapibus orci facilisis. Ut dapibus fermentum risus, viverra consequat tortor porttitor at. Aliquam erat volutpat. Cras congue euismod molestie. Suspendisse faucibus, quam in pellentesque rhoncus, nisi nulla molestie dolor, et laoreet libero dui sed enim. Quisque nec erat turpis. Fusce porta adipiscing lorem eget tincidunt. Integer lobortis arcu tempor odio imperdiet ornare. Aenean adipiscing, diam sed egestas cursus, orci dui elementum risus, at ullamcorper sem ante sit amet arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent volutpat lectus posuere est egestas et hendrerit ligula pulvinar.</p>
<p>Quisque eget eros quis elit rhoncus tincidunt. Vivamus sit amet nisl nulla, et iaculis sem. Integer luctus commodo quam ornare laoreet. Sed ultrices dolor eu tellus malesuada hendrerit. Integer tempus lacus in nisi laoreet pulvinar. Sed non diam elit, sit amet adipiscing mi. Proin sollicitudin ligula vitae massa sollicitudin porttitor. Aenean ut dui quis augue ornare ultrices nec bibendum felis. Nam ligula dolor, malesuada dictum tristique scelerisque, pretium eget justo. Ut lacinia rhoncus lorem, at gravida elit rhoncus malesuada. Phasellus auctor suscipit augue, vel elementum nisi feugiat ac. Nunc non leo et neque viverra faucibus ac sed quam. Suspendisse potenti. Nulla non lorem mi, vulputate commodo turpis. Donec aliquam aliquet justo, non pharetra urna interdum eget. Donec erat sapien, lobortis ac semper sed, feugiat a velit. Vivamus consectetur urna sed justo bibendum lobortis. Pellentesque eu orci enim, eget viverra dolor. Vestibulum porta, urna et mollis sodales, augue diam eleifend velit, nec congue mi odio nec magna. Nam tristique dignissim erat, in vehicula dui mollis non.</p>
<p>Integer orci quam, luctus eget accumsan eget, ornare ut libero. Vestibulum eget sem velit. Fusce lacinia tristique velit id sagittis. Proin sed nunc id magna posuere aliquet id vitae leo. Cras nisl ligula, venenatis mattis lobortis eget, euismod quis orci. Proin auctor luctus eleifend. Mauris ut enim at risus hendrerit consectetur ut eget dui. Morbi aliquam commodo elit, ut sagittis urna porta vitae. In semper scelerisque tortor vel rhoncus. Aliquam placerat ornare dui, id pulvinar mauris lobortis at. Nullam aliquet posuere leo, non volutpat mauris pretium vel. Nulla ornare nulla id urna adipiscing consectetur. Mauris quis nisi tellus. Quisque ac felis odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue nisl a nisi ullamcorper lacinia. Vestibulum pulvinar porttitor laoreet. Maecenas feugiat tellus posuere dolor porttitor dignissim. Pellentesque vitae ligula nec velit egestas euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis hendrerit ligula at lobortis. Maecenas vel erat nisl. Duis eleifend ipsum et urna consectetur venenatis pharetra lectus sollicitudin. Phasellus adipiscing scelerisque lorem, et tristique nunc sagittis ut. Maecenas dui tellus, varius vel ultrices sit amet, fermentum quis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eget cursus eros. Aliquam erat volutpat. In odio risus, pellentesque a tempus in, condimentum et leo. Maecenas porttitor nisi eget justo vehicula accumsan. Sed tristique elementum fringilla. Nam nibh velit, aliquam ac tincidunt vitae, lacinia sodales elit. Pellentesque vitae lacus vel est feugiat vulputate non id velit. Nunc fringilla ullamcorper nunc, vel scelerisque lacus rutrum eget. Aenean at nulla at massa aliquet laoreet quis tincidunt dui.</p>
<p>Aliquam erat volutpat. Etiam aliquam lacus sit amet ipsum bibendum blandit. Vestibulum vitae purus a massa fermentum viverra. Sed eu magna massa, eu euismod dolor. Maecenas urna libero, ullamcorper a aliquam vitae, convallis nec mauris. Sed at vulputate libero. Donec bibendum mollis dapibus. Curabitur sed justo odio, ac mattis nunc. Vestibulum malesuada tellus at sapien euismod posuere et eget tortor. In hac habitasse platea dictumst. Nullam sit amet mi nulla, in vulputate est. Morbi ligula justo, tristique vitae consectetur ac, egestas non risus. In hac habitasse platea dictumst. Pellentesque odio mauris, euismod at ultrices blandit, vehicula cursus risus. Nullam eu metus at felis cursus luctus. Nulla facilisi. Nullam nec nisi quis tortor scelerisque luctus. Morbi feugiat, est id porttitor tincidunt, nunc sem euismod tellus, in pharetra velit tellus vel turpis.</p>
<p>Vestibulum risus sem, volutpat ut fringilla rhoncus, consequat sit amet tellus. Suspendisse vel elit ac urna eleifend tincidunt sit amet nec lacus. Proin non leo at est lobortis imperdiet quis sed justo. Fusce consequat sagittis arcu et iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam aliquet nulla ultrices augue bibendum ut dapibus orci facilisis. Ut dapibus fermentum risus, viverra consequat tortor porttitor at. Aliquam erat volutpat. Cras congue euismod molestie. Suspendisse faucibus, quam in pellentesque rhoncus, nisi nulla molestie dolor, et laoreet libero dui sed enim. Quisque nec erat turpis. Fusce porta adipiscing lorem eget tincidunt. Integer lobortis arcu tempor odio imperdiet ornare. Aenean adipiscing, diam sed egestas cursus, orci dui elementum risus, at ullamcorper sem ante sit amet arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent volutpat lectus posuere est egestas et hendrerit ligula pulvinar.</p>
<p>Quisque eget eros quis elit rhoncus tincidunt. Vivamus sit amet nisl nulla, et iaculis sem. Integer luctus commodo quam ornare laoreet. Sed ultrices dolor eu tellus malesuada hendrerit. Integer tempus lacus in nisi laoreet pulvinar. Sed non diam elit, sit amet adipiscing mi. Proin sollicitudin ligula vitae massa sollicitudin porttitor. Aenean ut dui quis augue ornare ultrices nec bibendum felis. Nam ligula dolor, malesuada dictum tristique scelerisque, pretium eget justo. Ut lacinia rhoncus lorem, at gravida elit rhoncus malesuada. Phasellus auctor suscipit augue, vel elementum nisi feugiat ac. Nunc non leo et neque viverra faucibus ac sed quam. Suspendisse potenti. Nulla non lorem mi, vulputate commodo turpis. Donec aliquam aliquet justo, non pharetra urna interdum eget. Donec erat sapien, lobortis ac semper sed, feugiat a velit. Vivamus consectetur urna sed justo bibendum lobortis. Pellentesque eu orci enim, eget viverra dolor. Vestibulum porta, urna et mollis sodales, augue diam eleifend velit, nec congue mi odio nec magna. Nam tristique dignissim erat, in vehicula dui mollis non.</p>
<p>Integer orci quam, luctus eget accumsan eget, ornare ut libero. Vestibulum eget sem velit. Fusce lacinia tristique velit id sagittis. Proin sed nunc id magna posuere aliquet id vitae leo. Cras nisl ligula, venenatis mattis lobortis eget, euismod quis orci. Proin auctor luctus eleifend. Mauris ut enim at risus hendrerit consectetur ut eget dui. Morbi aliquam commodo elit, ut sagittis urna porta vitae. In semper scelerisque tortor vel rhoncus. Aliquam placerat ornare dui, id pulvinar mauris lobortis at. Nullam aliquet posuere leo, non volutpat mauris pretium vel. Nulla ornare nulla id urna adipiscing consectetur. Mauris quis nisi tellus. Quisque ac felis odio. </p>
</div>
</body>
</html>
Screenshot - Image link
Add padding-bottom to the body element and set the margin bottom of the #wrapper to 0px;
Centering block level elements in IE can be tricky. If you want to center the main portion of the site ('wrapper' in your example) then you can do the following:
body {
text-align: center;
}
#margin {
text-align: left;
}
This will cause IE to center everything on the page up to and including #margin, and then left-align everything inside #margin, which is essentially the same as just centering #margin.
I don't see any problems in IE 6 and 7. What IE are you using?
Does the problem remain if you use margins instead of padding?