how to make div with image like below in html and css - html

I wanted to do.
I have a div in there will be a image with some text so i want image in top-left corner then text.
<div>
<img src=""/> then text text text text text ....
</div>
if is there any other way then let me know.
enter image description here

you give the image float:left;
.pic{
float:left;
margin-right:10px;
}
<div>
<img src="http://lorempixel.com/400/200" class="pic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu nunc leo. Nulla tristique consequat lacinia. Etiam viverra dapibus nulla, ac luctus magna lobortis ac. Praesent magna velit, volutpat sed varius sit amet, fermentum vitae odio. Mauris porttitor bibendum arcu, dictum pulvinar diam malesuada eu. Duis non tellus arcu, a consequat lacus. Aliquam suscipit nunc ut sem sollicitudin consectetur a id dolor. Suspendisse pretium dictum luctus. Cras dapibus ullamcorper facilisis. Sed turpis ante, interdum eget lacinia quis, tincidunt ut sapien. Fusce ornare molestie sodales. Cras semper ultrices mattis. Aliquam erat volutpat. Morbi mollis ultricies lobortis.
Phasellus luctus posuere mauris id venenatis. Ut tempus tempor odio, sit amet fermentum enim porttitor vitae. Maecenas sodales sagittis risus vel tincidunt. Duis non sem nisi, sollicitudin commodo mi. Sed tempus egestas metus, eu elementum erat malesuada ac. Ut sed vulputate est. Nunc risus lectus, tempor ac ornare eget, convallis commodo nisi. Aliquam ut eros quis risus euismod vestibulum. Sed et mi a diam semper congue at sit amet massa. Morbi porta dolor eu justo blandit vitae tempus nisl porttitor. Donec et magna id felis lacinia cursus.
Phasellus luctus posuere mauris id venenatis. Ut tempus tempor odio, sit amet fermentum enim porttitor vitae. Maecenas sodales sagittis risus vel tincidunt. Duis non sem nisi, sollicitudin commodo mi. Sed tempus egestas metus, eu elementum erat malesuada ac. Ut sed vulputate est. Nunc risus lectus, tempor ac ornare eget, convallis commodo nisi. Aliquam ut eros quis risus euismod vestibulum. Sed et mi a diam semper congue at sit amet massa. Morbi porta dolor eu justo blandit vitae tempus nisl porttitor. Donec et magna id felis lacinia cursus.
In scelerisque luctus arcu ac volutpat. Cras in nisi lectus. Sed suscipit lorem non lorem accumsan semper. Phasellus et lacus non lacus pharetra imperdiet. Praesent aliquam porta magna, a interdum orci ultricies in. Curabitur sed arcu lacus, a pretium tellus. Curabitur ullamcorper tincidunt est nec sodales. Donec nisi leo, sollicitudin sed tristique in, rutrum vitae ligula. Quisque arcu nisl, ullamcorper dictum ultrices non, pulvinar vel diam. In hac habitasse platea dictumst. Suspendisse pellentesque, massa a faucibus condimentum, ligula lorem pretium tortor, non posuere urna odio eget est. Integer eget condimentum tortor. Vivamus hendrerit congue nisi semper gravida.
</div>

on the css of <img> tag use this
{
float:left;
}
or in html try this one.
<img style="float:left;">

Related

How to fixed footer at the bottom of the page? [duplicate]

This question already has answers here:
Make div stay at bottom of page's content all the time even when there are scrollbars
(12 answers)
Closed 1 year ago.
Here is my code, i want my footer to be static at the bottom of my html page, how can i fixed it ?
<footer class="footer">
<div>
</div>
<div class="footer_container">
<%= link_to "About Us", '#' %>
<%= link_to "Contact Us", '#' %>
</div>
</footer>
just write this css:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%; // <- this is optional
}
here is the reference
Add .footer Class
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
<h2>Footer Example</h2>
<div class="footer">
<div>
</div>
<div class="footer_container">
<ul class="navigation">
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
/* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Height of the footer */
background: #6cf;
}
<div id="container">
<div id="header">This is header</div>
<div id="body">
<h1>This is body DUMMY TEXT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At varius vel pharetra vel turpis nunc. Accumsan sit amet nulla facilisi. Molestie at elementum eu facilisis sed odio. Vitae
sapien pellentesque habitant morbi tristique senectus et. Lobortis scelerisque fermentum dui faucibus. Nunc scelerisque viverra mauris in aliquam sem. Congue mauris rhoncus aenean vel elit scelerisque mauris. Laoreet id donec ultrices tincidunt
arcu non sodales neque sodales. Velit aliquet sagittis id consectetur purus ut faucibus. Ipsum nunc aliquet bibendum enim facilisis gravida. Gravida in fermentum et sollicitudin ac orci phasellus. Tortor vitae purus faucibus ornare suspendisse sed
nisi. Faucibus pulvinar elementum integer enim neque volutpat. Venenatis cras sed felis eget velit. Velit egestas dui id ornare. Tempus iaculis urna id volutpat. In hac habitasse platea dictumst. Viverra maecenas accumsan lacus vel facilisis volutpat.
Enim praesent elementum facilisis leo. Ut tristique et egestas quis. Id interdum velit laoreet id donec ultrices tincidunt arcu. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Sit amet consectetur adipiscing elit duis tristique
sollicitudin nibh sit. Nec dui nunc mattis enim ut tellus. Adipiscing vitae proin sagittis nisl rhoncus. Bibendum est ultricies integer quis auctor. Egestas tellus rutrum tellus pellentesque eu tincidunt. Sagittis id consectetur purus ut faucibus
pulvinar elementum. Feugiat pretium nibh ipsum consequat nisl vel. Integer malesuada nunc vel risus. Tortor id aliquet lectus proin nibh nisl. Ante metus dictum at tempor commodo ullamcorper a. Enim blandit volutpat maecenas volutpat blandit aliquam
etiam erat. Morbi blandit cursus risus at ultrices mi. Netus et malesuada fames ac turpis egestas. Sed augue lacus viverra vitae congue. Cursus risus at ultrices mi. Libero enim sed faucibus turpis in eu mi bibendum neque. Vulputate dignissim suspendisse
in est ante in nibh mauris cursus. Ultricies mi quis hendrerit dolor magna eget. Cras adipiscing enim eu turpis egestas pretium aenean pharetra. Mattis ullamcorper velit sed ullamcorper morbi. Vel risus commodo viverra maecenas accumsan lacus vel.
Posuere urna nec tincidunt praesent semper feugiat nibh sed. Hendrerit gravida rutrum quisque non tellus orci. In nulla posuere sollicitudin aliquam ultrices sagittis orci. Eget mauris pharetra et ultrices neque ornare. Commodo ullamcorper a lacus
vestibulum. Ligula ullamcorper malesuada proin libero nunc consequat. Augue eget arcu dictum varius duis at consectetur lorem. Felis imperdiet proin fermentum leo vel orci porta. Et netus et malesuada fames ac. Tincidunt augue interdum velit euismod
in. Auctor neque vitae tempus quam pellentesque nec nam aliquam. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Semper viverra nam libero justo laoreet sit amet cursus sit. Quis risus sed vulputate odio. Non curabitur gravida arcu
ac tortor. Pellentesque eu tincidunt tortor aliquam nulla. Dui sapien eget mi proin sed libero enim sed faucibus. Adipiscing elit duis tristique sollicitudin. Enim lobortis scelerisque fermentum dui faucibus. Ac placerat vestibulum lectus mauris
ultrices eros in cursus turpis. Congue eu consequat ac felis donec. Diam maecenas sed enim ut sem viverra. Id cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Risus at
ultrices mi tempus imperdiet nulla. Vel eros donec ac odio tempor orci dapibus ultrices in. Nisl condimentum id venenatis a condimentum vitae. Amet est placerat in egestas erat. Aliquet nec ullamcorper sit amet. Odio facilisis mauris sit amet massa.
Velit aliquet sagittis id consectetur. Leo integer malesuada nunc vel. In ornare quam viverra orci. Tristique senectus et netus et malesuada. Sit amet purus gravida quis blandit turpis cursus in. Bibendum arcu vitae elementum curabitur vitae. Ultrices
gravida dictum fusce ut. Tellus rutrum tellus pellentesque eu. Sit amet luctus venenatis lectus. Eget felis eget nunc lobortis mattis. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Blandit turpis cursus in hac habitasse platea. Adipiscing
at in tellus integer feugiat scelerisque. Ut eu sem integer vitae justo. Id velit ut tortor pretium viverra suspendisse potenti. Nunc pulvinar sapien et ligula ullamcorper malesuada. Nulla aliquet enim tortor at. Suspendisse interdum consectetur
libero id faucibus. Vitae et leo duis ut diam quam nulla porttitor massa. Posuere ac ut consequat semper viverra nam libero. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Ultricies leo integer malesuada nunc vel risus commodo viverra.
Mi bibendum neque egestas congue quisque egestas diam. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Nec feugiat in fermentum posuere urna nec. Cras ornare arcu dui vivamus arcu. Tincidunt vitae semper quis lectus nulla. Faucibus
in ornare quam viverra orci sagittis eu volutpat. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Molestie at elementum eu facilisis sed odio morbi quis commodo. In aliquam sem fringilla ut morbi tincidunt augue. Quam pellentesque
nec nam aliquam sem et tortor consequat. In massa tempor nec feugiat nisl. Suspendisse sed nisi lacus sed viverra tellus in hac. Pretium lectus quam id leo in vitae. Maecenas sed enim ut sem viverra aliquet eget. Nulla malesuada pellentesque elit
eget gravida cum sociis. Consectetur a erat nam at lectus. In fermentum et sollicitudin ac orci. Purus ut faucibus pulvinar elementum integer enim. Ut diam quam nulla porttitor massa id neque. Vitae semper quis lectus nulla at. Amet facilisis magna
etiam tempor orci eu lobortis elementum nibh. Etiam sit amet nisl purus. Lectus mauris ultrices eros in cursus turpis massa. Vel facilisis volutpat est velit egestas dui id ornare arcu. Feugiat vivamus at augue eget arcu dictum varius. Sem et tortor
consequat id porta nibh venenatis cras sed. Euismod elementum nisi quis eleifend. Etiam non quam lacus suspendisse faucibus. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Suspendisse interdum consectetur libero id faucibus
nisl tincidunt eget. Auctor augue mauris augue neque gravida in. Ornare arcu dui vivamus arcu felis bibendum ut tristique. Ullamcorper sit amet risus nullam eget. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus.
Nec ultrices dui sapien eget mi proin sed libero enim. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Vel risus commodo viverra maecenas accumsan. Donec pretium vulputate sapien nec sagittis aliquam malesuada.
Imperdiet sed euismod nisi porta lorem mollis aliquam ut. Nunc sed blandit libero volutpat sed cras. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Augue ut lectus arcu bibendum. Orci porta non pulvinar neque laoreet suspendisse.
Gravida neque convallis a cras semper. Bibendum enim facilisis gravida neque convallis a cras semper. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Mauris in aliquam sem fringilla ut morbi tincidunt. Consequat ac felis donec et
odio. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Vel pharetra vel turpis nunc. Velit aliquet sagittis id consectetur purus ut. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Ut faucibus pulvinar elementum integer.
Convallis posuere morbi leo urna molestie at elementum. Justo nec ultrices dui sapien. Sed blandit libero volutpat sed cras ornare arcu dui. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Adipiscing elit ut aliquam purus
sit amet luctus venenatis lectus. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Dictumst quisque sagittis purus sit. Pellentesque nec nam aliquam sem et tortor consequat id. Diam ut venenatis tellus in. Eu nisl nunc mi ipsum
faucibus vitae aliquet nec. Consequat interdum varius sit amet mattis vulputate enim nulla aliquet. Adipiscing diam donec adipiscing tristique risus. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Eget dolor morbi non arcu risus quis
varius. Facilisis volutpat est velit egestas dui. Varius vel pharetra vel turpis nunc eget. Eget mi proin sed libero enim sed faucibus turpis. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Ultricies mi quis hendrerit
dolor magna eget est lorem. Amet facilisis magna etiam tempor orci. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Elit ut aliquam purus sit amet luctus venenatis lectus. Eget lorem dolor sed viverra ipsum nunc. Magna sit amet purus
gravida quis blandit turpis. Eget felis eget nunc lobortis mattis aliquam. Turpis egestas pretium aenean pharetra magna ac. In ornare quam viverra orci sagittis eu volutpat. Feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat.
Purus in mollis nunc sed id semper risus in hendrerit. Odio tempor orci dapibus ultrices in. Viverra vitae congue eu consequat ac felis donec et odio. Etiam sit amet nisl purus in mollis nunc. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper
velit sed. Nibh tellus molestie nunc non blandit. Pharetra sit amet aliquam id diam maecenas ultricies. Eu facilisis sed odio morbi quis commodo. Id consectetur purus ut faucibus. Blandit cursus risus at ultrices mi tempus. Id interdum velit laoreet
id donec ultrices. Purus gravida quis blandit turpis cursus in. A scelerisque purus semper eget. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. At augue eget arcu dictum varius duis. Suspendisse faucibus interdum posuere lorem.
Id faucibus nisl tincidunt eget nullam. Diam maecenas ultricies mi eget mauris pharetra et ultrices. Tortor posuere ac ut consequat semper viverra. Est lorem ipsum dolor sit amet. Scelerisque eleifend donec pretium vulputate sapien. Tempus iaculis
urna id volutpat lacus laoreet. Tristique nulla aliquet enim tortor. Consectetur a erat nam at lectus. Mi sit amet mauris commodo quis. Purus gravida quis blandit turpis. Mi eget mauris pharetra et ultrices neque ornare. Ornare arcu dui vivamus
arcu. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. At quis risus sed vulputate odio ut. Sed augue lacus viverra vitae. Sit amet purus gravida quis blandit turpis cursus in. Enim blandit volutpat maecenas volutpat blandit aliquam.
Lacus sed turpis tincidunt id aliquet risus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Gravida arcu ac tortor dignissim convallis aenean. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Tortor vitae purus
faucibus ornare suspendisse sed nisi lacus. Varius sit amet mattis vulputate enim. Enim diam vulputate ut pharetra. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Odio
euismod lacinia at quis risus sed. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Massa id neque aliquam vestibulum. Id donec ultrices tincidunt arcu non sodales neque sodales. Iaculis eu non diam phasellus vestibulum lorem sed risus.
Volutpat ac tincidunt vitae semper quis lectus nulla at. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Arcu bibendum at varius vel pharetra vel turpis. Velit aliquet sagittis id consectetur purus ut faucibus. Enim tortor
at auctor urna nunc. Ut etiam sit amet nisl purus in mollis nunc sed. Eu feugiat pretium nibh ipsum consequat. Dui sapien eget mi proin sed. Habitant morbi tristique senectus et netus. Convallis aenean et tortor at risus viverra adipiscing at. Tempus
imperdiet nulla malesuada pellentesque. Massa id neque aliquam vestibulum morbi blandit cursus risus. Adipiscing bibendum est ultricies integer. Luctus accumsan tortor posuere ac ut consequat. Nulla facilisi etiam dignissim diam quis enim lobortis
scelerisque. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Placerat in egestas erat imperdiet sed euismod nisi porta. Est sit amet facilisis magna etiam tempor orci eu lobortis. Tortor at risus viverra adipiscing at in. Sed cras
ornare arcu dui vivamus. Neque laoreet suspendisse interdum consectetur. Dui faucibus in ornare quam viverra orci. Cursus sit amet dictum sit amet justo donec enim. Maecenas volutpat blandit aliquam etiam erat velit. Id nibh tortor id aliquet lectus
proin. Vulputate ut pharetra sit amet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Tincidunt dui ut ornare lectus sit amet. Diam donec adipiscing tristique risus
nec feugiat in fermentum posuere. Lacinia quis vel eros donec ac odio tempor orci. Sodales ut eu sem integer vitae justo eget magna. Id leo in vitae turpis massa sed. Aenean et tortor at risus viverra adipiscing at. Malesuada pellentesque elit eget
gravida cum sociis natoque penatibus et. Feugiat vivamus at augue eget arcu dictum varius duis at. Quis auctor elit sed vulputate mi sit amet mauris. Duis ut diam quam nulla porttitor massa id neque aliquam. Dictum varius duis at consectetur lorem
donec massa. Sagittis orci a scelerisque purus semper eget. Arcu felis bibendum ut tristique et. Nibh ipsum consequat nisl vel. Fermentum odio eu feugiat pretium nibh ipsum consequat. Amet commodo nulla facilisi nullam vehicula ipsum a. Enim tortor
at auctor urna nunc id. Faucibus nisl tincidunt eget nullam non. Volutpat odio facilisis mauris sit amet massa. Elementum integer enim neque volutpat ac tincidunt vitae semper. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae.
In tellus integer feugiat scelerisque varius morbi enim. At consectetur lorem donec massa. Tristique risus nec feugiat in fermentum posuere urna. Diam in arcu cursus euismod quis viverra nibh cras. Pellentesque nec nam aliquam sem et tortor consequat
id. Sem viverra aliquet eget sit amet tellus. Diam vel quam elementum pulvinar. Nec ultrices dui sapien eget mi proin. Eget egestas purus viverra accumsan in nisl nisi scelerisque. Vulputate odio ut enim blandit. Habitasse platea dictumst vestibulum
rhoncus est pellentesque elit. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Integer eget aliquet nibh
praesent tristique magna sit. Ut pharetra sit amet aliquam. Aenean et tortor at risus viverra.</p>
</div>
<div id="footer">This will be footer</div>
</div>

Best way to display large HTML string in a HTML div

I have string which 10558 characters long contains HTML Markup like:
<html>
<body>
.......
.......
.......
</body>
</html>
I am fetching that using AJAX call.
What I want is, to show that HTML markup in a element on MVC page,
I tried with 200 characters string which works fine but when it comes to 10558 characters then the window gets hanged.
What is the best way to show the large HTML markup in div?
(You said you're getting the HTML from an AJAX call - as opposed to rendering it server-side using Razor).
If you want to show the markup so that human users can "see" the HTML syntax, then set .textContent:
var htmlFromAjax = ...
var e = document.createElement("pre");
e.textContent = htmlFromAjax;
document.body.appendChild( e );
If you actually want to render the HTML as HTML inside the document, then using innerHTML is acceptable for this task - assuming you fully-trust the source of the AJAX response not to return malicious HTML that might contain scripts (and regardless, you should set a Content-Security-Policy on your document so browsers won't execute any added scripts anyway):
var htmlFromAjax = ...
var div = document.createElement("div");
e.innerHTML = htmlFromAjax;
document.body.appendChild( e );
This is 10K - nothing special
If you want to see the markup, replace all < with <
<div id="Inner">
<h1>Lorem Ipsum</h1>
<h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
<h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
<hr>
<div id="Content">
<div class="boxed">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod nulla sit amet feugiat facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis felis magna, faucibus non blandit id, luctus quis ante. Ut posuere felis neque,
ut semper turpis rhoncus et. Vivamus convallis erat sed nisl dignissim posuere. Morbi hendrerit mattis quam at scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer congue ligula nec arcu
venenatis consectetur. Suspendisse id quam finibus, semper lorem sit amet, elementum augue. Praesent facilisis volutpat nisi, at vehicula arcu imperdiet ut. Cras viverra sit amet nulla ut porta. Suspendisse tempus accumsan ligula quis gravida.
</p>
<p>
Proin non faucibus ligula. Donec aliquam dapibus tellus, eget feugiat eros laoreet vel. Ut convallis, magna a luctus sodales, massa nisl cursus justo, eget ornare dolor purus nec ligula. In hac habitasse platea dictumst. Cras non porta dui. Vivamus at
iaculis eros. Integer vestibulum risus et nisi congue, eu auctor diam consectetur. Duis hendrerit tristique quam quis vehicula.
</p>
<p>
Nulla placerat scelerisque tellus, eget tempor purus vehicula eget. Nunc dictum ipsum a laoreet fermentum. Sed id nulla ut sapien tincidunt faucibus. Sed pretium placerat lorem vitae pharetra. Curabitur libero est, euismod molestie est sit amet, dapibus
accumsan libero. Aliquam eget facilisis ante. Fusce et nibh at nisl semper egestas ut at augue. Sed quam augue, tristique et rutrum ut, consectetur sed dolor. In ultricies odio eget erat pharetra vestibulum. Donec blandit, tortor eget molestie
sollicitudin, odio quam feugiat arcu, sed ullamcorper purus felis et felis. Nullam mattis consectetur orci, egestas feugiat orci tristique eu. Nunc convallis felis id ex ornare, sed vestibulum mi tempor. Donec sodales eros sit amet nibh tempus
tristique.
</p>
<p>
Morbi non sapien nibh. Curabitur vel velit eget lectus consectetur imperdiet. Proin suscipit nulla mauris, vel mattis sem porttitor quis. Ut sit amet convallis arcu, non eleifend felis. Phasellus porta scelerisque lacus, vel consectetur nunc convallis
eget. Pellentesque pellentesque lobortis nisl et porta. Aenean fermentum et enim ac volutpat. Suspendisse aliquet, mi ut ullamcorper elementum, orci ligula vehicula lacus, lobortis lacinia lacus mi ut augue. Aliquam varius nec sapien fermentum
sollicitudin. Aliquam auctor odio et est ultricies bibendum in vel elit.
</p>
<p>
Phasellus a consequat lectus. Aenean nisi eros, fringilla id libero at, elementum rhoncus magna. Donec ullamcorper blandit nunc non dapibus. Aenean ornare commodo lorem at convallis. Nam eros eros, volutpat non scelerisque eu, blandit ac elit. Nulla facilisi.
Curabitur id dignissim elit, ultricies vulputate risus.
</p>
<p>
Nunc ac orci a elit rutrum semper. Vestibulum in commodo erat. Nam iaculis congue euismod. Phasellus laoreet nibh non mauris condimentum vulputate. Donec eget diam porta, eleifend leo vitae, pellentesque turpis. Quisque suscipit dictum nibh pellentesque
sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Integer neque felis, dictum eget neque eget, rutrum vestibulum sapien. Sed erat elit, convallis in sem et, efficitur cursus lacus. Etiam tempor leo sapien, eu placerat arcu lobortis ac. Donec dapibus ullamcorper lectus ac facilisis. Vestibulum facilisis,
odio ac mollis sollicitudin, nibh massa pharetra odio, vitae pharetra metus nibh quis urna. Nulla nunc risus, dictum id placerat quis, accumsan feugiat augue. Aliquam quis efficitur tortor. Quisque varius felis eros, id consectetur enim porta
quis.
</p>
<p>
Nam id purus vitae nulla placerat commodo. Cras faucibus vehicula lectus ac pharetra. Aenean id elit ut risus ultrices ullamcorper sit amet convallis dui. Donec facilisis, leo quis ultricies fermentum, massa urna sagittis turpis, non tempus erat diam
eget enim. Morbi mauris leo, pulvinar eu aliquam eget, lacinia sit amet mauris. Donec blandit mollis nunc nec maximus. Donec at lacinia ligula, a euismod ex. Nunc accumsan venenatis ipsum id sodales. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Pellentesque eu viverra urna. Praesent ullamcorper aliquam lacus ac vestibulum. Donec efficitur efficitur purus, id venenatis nisl laoreet eu. Ut elit urna, faucibus in elit ac, scelerisque aliquam augue. Etiam blandit magna
ut lectus porta feugiat nec pharetra arcu. Fusce massa turpis, eleifend volutpat erat sed, iaculis interdum nisl. Morbi lobortis tincidunt ex, id elementum nulla sollicitudin nec.
</p>
<p>
Praesent interdum risus ligula, sed volutpat lacus aliquam sit amet. Quisque in dapibus augue. Maecenas ultricies, ipsum sit amet congue suscipit, neque mi vehicula mi, et auctor sapien diam vitae purus. Proin vitae tincidunt odio, at placerat tellus.
Aenean fermentum libero vel nulla convallis egestas. Suspendisse porttitor orci ex, quis dapibus nibh accumsan sit amet. Curabitur imperdiet nec odio a feugiat. Suspendisse dui risus, dapibus id arcu vitae, varius hendrerit ipsum. Quisque vestibulum
imperdiet venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis laoreet sapien vel lacus molestie tempus. Phasellus eget feugiat tellus. Etiam tristique neque a aliquam commodo.
</p>
<p>
Quisque ut velit laoreet, gravida dolor eget, congue risus. Vestibulum eget tortor at nisi blandit malesuada. Suspendisse mollis nunc ipsum, non fringilla lacus accumsan eu. Nullam vehicula mauris augue, non imperdiet lacus vestibulum a. Phasellus lacinia
scelerisque nulla eu tempus. Cras varius augue turpis, sed hendrerit enim dignissim eget. Morbi elementum ante vel odio rhoncus molestie.
</p>
<p>
Suspendisse sem metus, vulputate non justo eget, consectetur egestas enim. Aliquam erat volutpat. Maecenas ac pretium lectus, non porttitor est. Duis quis suscipit arcu. Ut eget volutpat metus. Vivamus eget turpis aliquam, luctus est vitae, porttitor
arcu. Nunc quis turpis id dui hendrerit convallis. Sed dictum pharetra est, eget malesuada ex vestibulum vel. Donec sit amet lacus a odio lobortis pretium sed ac ex. Suspendisse a scelerisque nisi, in convallis nibh. Ut ullamcorper, quam et
aliquet dictum, dolor urna auctor metus, in varius odio urna in lorem. Pellentesque in felis sollicitudin, fringilla libero non, feugiat magna.
</p>
<p>
Morbi consectetur ultricies nisl, ut commodo nunc. Vestibulum ultrices efficitur justo, vulputate fermentum risus vehicula id. Fusce in quam in elit ullamcorper convallis vitae et tellus. Maecenas at sollicitudin enim, nec iaculis enim. Phasellus tempus
eros vitae mi feugiat, sit amet euismod mauris pharetra. Nam condimentum in mauris sit amet commodo. Donec lacinia, lectus eget rhoncus rutrum, augue orci gravida nibh, ut bibendum felis orci non eros. Nam hendrerit, tellus vitae tempus elementum,
nibh urna ultrices neque, vitae tempor nulla risus quis enim. Suspendisse potenti. Cras convallis quis leo ac commodo. Donec eu nisi interdum, molestie urna eget, porta arcu. Quisque varius, nunc at consectetur vehicula, velit ligula tempor
dolor, vitae vulputate odio diam id odio.
</p>
<p>
Curabitur finibus odio erat, quis semper nibh tempor ut. Vestibulum congue id nibh sed rhoncus. Nulla eleifend lacus nisi. Aliquam in magna laoreet, ornare est faucibus, egestas quam. Fusce pretium mi non metus dapibus tempor a sed orci. Ut tempor nulla
dui. Aenean commodo nunc nulla, sed accumsan libero mattis eget. Nunc finibus facilisis egestas. Praesent arcu nulla, rutrum sit amet arcu sed, sodales sodales velit. Fusce et magna justo. Aliquam tortor purus, convallis eget tempus quis, venenatis
vitae turpis. Cras volutpat fringilla leo, nec blandit erat dapibus hendrerit. Curabitur tristique dolor non bibendum hendrerit.
</p>
<p>
Integer in justo ut lectus elementum tempor eget at tellus. Nunc pretium tincidunt enim, et consectetur sapien tincidunt a. Praesent sed fermentum odio. Integer pulvinar purus tortor, finibus maximus nunc efficitur vel. Suspendisse potenti. Praesent vel
arcu ut nisi laoreet ultricies. Nunc at molestie velit, a molestie elit. Quisque efficitur sed justo id imperdiet. Etiam pulvinar gravida purus ac pellentesque. Pellentesque a diam lorem.
</p>
<p>
In hac habitasse platea dictumst. Morbi porta leo quis nibh tristique malesuada. Nullam nisl urna, viverra vulputate ultricies quis, placerat eu urna. Nunc ac sollicitudin mi. Nam gravida orci id tortor finibus, nec varius enim luctus. Etiam neque ex,
condimentum a risus sit amet, convallis feugiat dui. Quisque gravida mauris sem, sed accumsan tellus volutpat vel. Fusce pellentesque porttitor interdum. In rutrum posuere risus at semper. Donec vel dui sed ipsum euismod vulputate.
</p>
<p>
Vestibulum vehicula nisi non urna blandit, non euismod tortor sagittis. Ut tincidunt iaculis bibendum. Vestibulum vel nulla nunc. Etiam lobortis orci non facilisis pellentesque. Praesent commodo mi eu egestas cursus. Integer tincidunt hendrerit magna,
vel convallis odio rhoncus facilisis. Praesent at posuere risus. Praesent massa orci, congue vel justo porttitor, blandit ullamcorper mi. Nulla eu laoreet dolor, vitae varius elit. Vivamus sagittis nisi dolor, tincidunt convallis quam eleifend
a.
</p>
<p>
Proin ligula leo, finibus eget hendrerit iaculis, lobortis sit amet urna. Aenean eget dignissim orci. Maecenas tincidunt, quam id laoreet hendrerit, lectus eros dapibus velit, sed pretium quam nisl quis urna. Ut vitae lorem sit amet augue elementum semper
vel at lorem. Vivamus vitae molestie ante. In suscipit posuere ullamcorper. Donec viverra congue mauris, at dignissim eros facilisis nec. Curabitur tristique velit id nulla malesuada, eu gravida est fringilla. Nullam feugiat scelerisque porta.
</p>
<p>
Nullam quis ullamcorper ante. Mauris non diam leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non semper elit. Cras sed elit elementum, vehicula velit volutpat, lobortis mi. Cras tincidunt consequat scelerisque. Sed accumsan dictum
ante, vel porttitor augue luctus quis. Donec risus justo, congue quis laoreet eu, finibus eu quam. Morbi in felis elit. Sed ac nulla gravida orci aliquam.
</p>
</div>
<div id="generated">Generated 18 paragraphs, 1471 words, 10000 bytes of Lorem Ipsum</div>
</div>
</div>
<hr>
<div class="boxed" style="overflow:visible !important;"><a style="text-decoration:none" href="mailto:help#lipsum.com">help#lipsum.com</a><br><a style="text-decoration:none" target="_blank" href="/privacy.pdf">Privacy Policy</a><a href="http://citenpl.internal.epo.org/wf/web/citenpl/citenpl.html?_url=https%3A//www.lipsum.com/privacy.pdf"
class="btncitenpl citenpl" name="MIKELink" title="Cite this document: https://www.lipsum.com/privacy.pdf">CiteNPL<span class="doc">DOCS</span></a></div>
</div>

Website Black space at bottom of screen on mobile

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>

Top header bar with position fixed on iOS chrome moves about when you scroll

The following simple page with a position fixed header bar, works fine in most browsers etc. But on iOS in google chrome if you scroll up and down the page eratically eventually the header bar moves down the page a bit, like the following screen shot.
Any ideas how to fix?
Test page: http://tinyurl.com/h9pdrn3
Thanks :)
<!DOCTYPE html>
<html>
<head>
<title>position test</title>
<meta charset="utf-8" />
</head>
<body>
<div style="position: fixed; background-color: aqua; width: 100%; top: 0; left: 0; line-height: 60px; height: 60px;">
Fixed header
</div>
<div style="padding-top: 60px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta aliquet dictum. Aliquam massa libero, consectetur et purus sed, luctus porttitor ligula. Phasellus tempus risus at elit sagittis, sed tincidunt erat rutrum. Donec non dictum turpis. Vestibulum sapien tellus, tincidunt sed ex a, pretium facilisis est. Suspendisse potenti. Fusce laoreet turpis turpis, a rhoncus diam fringilla ac. Proin turpis arcu, hendrerit viverra neque quis, placerat tempor ligula. Duis ut scelerisque ante. Etiam posuere est ut molestie fermentum. Sed feugiat tortor at libero ultrices, vitae consectetur nibh luctus.
</p>
<p>
Sed nulla enim, tincidunt non laoreet quis, congue aliquam nisl. Sed dapibus in erat cursus rutrum. Nullam efficitur sem ipsum, vitae sagittis est tristique vitae. Ut dignissim est eget nisi condimentum posuere. Duis nec neque tempor, finibus sem sed, varius risus. Nullam convallis imperdiet sem vel sagittis. Nulla ultricies sagittis vestibulum. In semper ante ipsum, ac dignissim diam bibendum et. Nam in sapien sem.
</p>
<p>
Phasellus neque nibh, pharetra ac dui et, iaculis lacinia ipsum. Phasellus laoreet eros ut lectus viverra dictum. Mauris vitae neque maximus, hendrerit enim gravida, ornare magna. Sed rhoncus vitae nunc sed iaculis. Donec vitae enim ut enim fermentum scelerisque. Nulla ut vestibulum leo. In ut urna in neque tempor maximus non et massa. In eu tincidunt quam. Donec eu lectus vehicula, consequat enim et, porttitor libero. Phasellus magna tellus, rhoncus non quam vitae, congue sagittis nunc. Mauris bibendum ultrices arcu a lobortis. Aliquam erat volutpat. Ut quis mi sit amet nulla tincidunt tincidunt.
</p>
<p>
Nam at interdum nulla, eget ultricies libero. Suspendisse est elit, malesuada sit amet hendrerit nec, posuere et purus. Vivamus sed eros ut nisi cursus hendrerit. Curabitur vel lacus maximus, tempus nulla sed, volutpat risus. Etiam in blandit quam. Nullam lacinia neque eu ligula lobortis facilisis. Quisque ipsum erat, iaculis vitae nunc vitae, egestas feugiat enim.
</p>
<p>
Fusce consectetur leo in est sodales, ut congue est commodo. Donec cursus odio sapien, id malesuada sem dictum eget. Sed sit amet sodales nisl, sed venenatis tortor. Nulla facilisi. Maecenas maximus tortor sed nisi mattis luctus. Proin id diam sagittis ante pulvinar dictum. Donec volutpat nec nibh eget dictum. Donec tellus turpis, hendrerit et risus sed, viverra porttitor leo. Pellentesque non vulputate arcu, eget finibus tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta aliquet dictum. Aliquam massa libero, consectetur et purus sed, luctus porttitor ligula. Phasellus tempus risus at elit sagittis, sed tincidunt erat rutrum. Donec non dictum turpis. Vestibulum sapien tellus, tincidunt sed ex a, pretium facilisis est. Suspendisse potenti. Fusce laoreet turpis turpis, a rhoncus diam fringilla ac. Proin turpis arcu, hendrerit viverra neque quis, placerat tempor ligula. Duis ut scelerisque ante. Etiam posuere est ut molestie fermentum. Sed feugiat tortor at libero ultrices, vitae consectetur nibh luctus.
</p>
<p>
Sed nulla enim, tincidunt non laoreet quis, congue aliquam nisl. Sed dapibus in erat cursus rutrum. Nullam efficitur sem ipsum, vitae sagittis est tristique vitae. Ut dignissim est eget nisi condimentum posuere. Duis nec neque tempor, finibus sem sed, varius risus. Nullam convallis imperdiet sem vel sagittis. Nulla ultricies sagittis vestibulum. In semper ante ipsum, ac dignissim diam bibendum et. Nam in sapien sem.
</p>
<p>
Phasellus neque nibh, pharetra ac dui et, iaculis lacinia ipsum. Phasellus laoreet eros ut lectus viverra dictum. Mauris vitae neque maximus, hendrerit enim gravida, ornare magna. Sed rhoncus vitae nunc sed iaculis. Donec vitae enim ut enim fermentum scelerisque. Nulla ut vestibulum leo. In ut urna in neque tempor maximus non et massa. In eu tincidunt quam. Donec eu lectus vehicula, consequat enim et, porttitor libero. Phasellus magna tellus, rhoncus non quam vitae, congue sagittis nunc. Mauris bibendum ultrices arcu a lobortis. Aliquam erat volutpat. Ut quis mi sit amet nulla tincidunt tincidunt.
</p>
<p>
Nam at interdum nulla, eget ultricies libero. Suspendisse est elit, malesuada sit amet hendrerit nec, posuere et purus. Vivamus sed eros ut nisi cursus hendrerit. Curabitur vel lacus maximus, tempus nulla sed, volutpat risus. Etiam in blandit quam. Nullam lacinia neque eu ligula lobortis facilisis. Quisque ipsum erat, iaculis vitae nunc vitae, egestas feugiat enim.
</p>
<p>
Fusce consectetur leo in est sodales, ut congue est commodo. Donec cursus odio sapien, id malesuada sem dictum eget. Sed sit amet sodales nisl, sed venenatis tortor. Nulla facilisi. Maecenas maximus tortor sed nisi mattis luctus. Proin id diam sagittis ante pulvinar dictum. Donec volutpat nec nibh eget dictum. Donec tellus turpis, hendrerit et risus sed, viverra porttitor leo. Pellentesque non vulputate arcu, eget finibus tortor.
</p>
</div>
</body>
</html>
Did you try using !important?
<div style="position:fixed !important; top:0px !important; left:0px !important;">

CSS Margin Auto

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?