I'm trying to find a way to float an image to the top of the paragraph it comes after. It must come after the text of the paragraph in the HTML, such that screen readers and small screens (with the image not floated due to media queries) see the image after the text of the paragraph. I can put the <img> inside or outside the <p>, but it must be after the text.
Is there a way to make the image appear at the top right of the text of the paragraph, and have the text of the paragraph appropriately wrap around the image, using only CSS?
[...document.querySelectorAll('img')].forEach(img => {
const rand = Math.floor(Math.random() * 300 + 100);
img.setAttribute('src', `https://placekitten.com/150/${rand}/`);
img.setAttribute('height', rand);
});
img {
float: right;
width: 150px;
height: auto;
}
body {
display: flex;
}
<div class="inside">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere odio in tincidunt posuere. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat.
<img src="https://placekitten.com/150/200" width="150" height="200" alt="Cat">
</p>
</div>
<div class="outside">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere odio in tincidunt posuere. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat. Phasellus id lectus erat. Proin sollicitudin tortor risus, vel tincidunt est accumsan id. Donec urna erat, interdum in elit sit amet, egestas ullamcorper tortor. Nam a leo nec lectus varius tristique. Cras et erat ac lectus auctor interdum. Ut eros tellus, interdum a rutrum vitae, rutrum ac ex. Curabitur aliquet purus libero, in porttitor dui egestas non. Pellentesque ex dui, commodo vitae lectus non, aliquam pretium mauris. Etiam viverra imperdiet sem et vestibulum. Aenean eu sapien eget diam tincidunt sagittis vitae ac turpis. Praesent nec libero condimentum, imperdiet lorem et, semper lectus. Curabitur ac erat eu neque volutpat aliquam sit amet ut nisi. Sed vestibulum augue arcu, at luctus urna dignissim at. Vestibulum pretium consequat erat vel placerat.
</p>
<img src="https://placekitten.com/200/200" width="200" height="200" alt="Cat">
</div>
I have a basic layout with a fixed header like this...
function myFunction() {
var x = document.getElementById("message");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
html, body {
margin:0;
padding:0;
}
#message {
background:red;
color:white;
text-align:center;
padding:10px;
}
header {
background:teal;
color:white;
text-align:center;
position:fixed;
width:100%;
height:50px;
}
.content {
background:wheat;
padding-top:50px;
}
<div id="message">
This is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed length
<button onclick="myFunction()">Close Message</button>
</div>
<header>
This is my header
</header>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
</div>
I want the header to be fixed as well as the message, but when I set it to fixed it breaks the layout. Where am I going wrong?
If you're OK with not supporting IE < 11 (https://caniuse.com/#feat=flexbox) use flexbox (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
function myFunction() {
var x = document.getElementById("message");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
#message {
flex: 0 0 auto;
padding: 10px;
background: red;
color: white;
text-align: center;
}
header {
flex: 0 0 auto;
height: 50px;
background: teal;
color: white;
text-align: center;
}
.content {
flex: 1 1 auto;
overflow: auto;
background: wheat;
}
<div class="container">
<div id="message">
This is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed length
<button onclick="myFunction()">Close Message</button>
</div>
<header>
This is my header
</header>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
</div>
</div>
Add another container that you make fixed and the header will be on the good place after removing the message. You may also adjust the padding using JS:
document.querySelector('.content').style.paddingTop=document.querySelector('.fixed').clientHeight+"px";
function myFunction() {
var x = document.getElementById("message");
x.style.display = "none";
document.querySelector('.content').style.paddingTop="50px";
}
html, body {
margin:0;
padding:0;
}
.fixed {
position:fixed;
top:0;
width:100%;
}
#message {
background:red;
color:white;
text-align:center;
padding:10px;
}
header {
background:teal;
color:white;
text-align:center;
width:100%;
height:50px;
}
.content {
background:wheat;
padding-top:50px;
}
<div class="fixed">
<div id="message">
This is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed length
<button onclick="myFunction()">Close Message</button>
</div>
<header>
This is my header
</header>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
</div>
I do not see what the problem is. If you want the message to overlap, use this code:
#message {
background:red;
color:white;
text-align:center;
padding:10px;
position:absolute;
z-index:100;
}
When you add fixed position to a tag element on html it make the element stay on the screen ignoring the parent element. So if you put position: fixed to an element and top: 0 it says that the element should stay always on view at the top of the screen.
So if it is the behave you are expecting to is that the message and header should scroll and stays always on view then you should also add the position: fixed to your message: element.
#message {
background:red;
color:white;
text-align:center;
padding:10px;
position: fixed;
}
If you want the header to stay put where it is without scrolling along with the screen you should remove the position: fixed from header.
You'll need some javascript because fixed elements are taken out of the position layout, so there's no way to have the browser calculate the top offset of the header with just css.
Here's one solution, which runs a function onload to measure the calculated offset, set the top of the header, then set the message to position:fixed.
It works, but note that if the user changes the size of the browser window, the top property won't be updated and you'll have unexpected results. You'll have to handle that yourself if you like this beginning ;).
function myFunction() {
var x = document.getElementById("message");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
window.onload = function() {
var header = document.getElementsByTagName("header")[0];
var headerTop = header.offsetTop;
header.style.top = `${headerTop}px`;
document.getElementById("message").style.position = "fixed";
}
html, body {
margin:0;
padding:0;
}
#message {
background:red;
color:white;
text-align:center;
padding:10px;
}
header {
background:teal;
color:white;
text-align:center;
position:fixed;
width:100%;
height:50px;
}
.content {
background:wheat;
padding-top:50px;
}
<div id="message">
This is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed length
<button onclick="myFunction()">Close Message</button>
</div>
<header>
This is my header
</header>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
</p>
<p>
Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
</p>
</div>
You are very close. All you need to do is to remove position:fixed; from header class to have it fixed. Here
.header {
background:teal;
color:white;
text-align:center;
width:100%;
height:50px;
}
I have got a div that needs to have a fixed height and will have either floated or non-floated content.I had no issues with the CSS in Firefox and Safari but started having problems with IE6.Im using overflow:hidden to clear the float but the content gets clipped in IE6,so I used zoom to trigger the hasLayout property.The float gets cleared in IE 6 but I need the container to have a fixed height,if I specify a fixed height for the container the content gets clipped.Is it possbile to hav a div container that can have a fixed height and aslo have the overflow:hidden to clear the floats?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#boxContent{background:red;min-height:425px;height:auto !important;height:425px;overflow:hidden;zoom: 1;}
#box1{background:yellow;float:left;width:50%}
#box2{background:green;float:left;width:50%}
</style>
</head>
<body>
<div id="boxContent">
<div id="box1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat scelerisque purus nec elementum. Maecenas tempus sollicitudin tincidunt. Integer tincidunt volutpat ullamcorper. Etiam laoreet tincidunt nunc, sit amet venenatis est rhoncus vel. Aenean enim dui, blandit eget egestas blandit, blandit id purus. Curabitur non tortor neque, et ornare elit. Mauris at nisi turpis. Vivamus tempus, enim quis posuere laoreet, elit est varius tellus, vel faucibus nunc enim vel lacus. Sed semper feugiat nisi sit amet pulvinar. Duis mattis cursus nunc vel volutpat. Etiam ornare mollis leo ac mattis.
Cras sagittis mauris mi, et pellentesque arcu. Phasellus aliquet nisi sed tortor dictum faucibus. Morbi facilisis pretium lorem, in cursus augue fringilla eu. Morbi felis lectus, commodo at fermentum eget, varius at sem. Aenean dapibus lacus eu orci mollis porttitor. Curabitur nec purus quis risus imperdiet malesuada. Suspendisse potenti. In ipsum lorem, molestie ac sollicitudin at, dignissim eget est. Curabitur arcu eros, accumsan et pretium dignissim, pellentesque eget mi. In fringilla neque pharetra leo imperdiet ut dictum odio hendrerit. Etiam ligula nisl, feugiat vel mattis vel, pulvinar vitae dui.
Cras felis massa, porttitor sed bibendum at, vestibulum in nisi. Nulla egestas hendrerit felis, accumsan imperdiet tellus commodo id. Maecenas tincidunt justo ut erat porta et faucibus ante dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida tristique tristique. Etiam non dolor mi, id eleifend odio. Sed cursus nisl ut enim dictum adipiscing sed volutpat lacus. Quisque ut quam felis, quis vulputate velit. Fusce consequat, metus sed vulputate ultricies, leo leo tempor elit, vitae fringilla odio orci id leo. Sed nec neque nisl, eu fermentum arcu. Nunc facilisis scelerisque ipsum dictum feugiat. In hac habitasse platea dictumst. Pellentesque et nisl lacus, nec vulputate turpis. Nulla volutpat faucibus arcu et dapibus. Integer in erat libero, quis dignissim magna. Mauris metus felis, suscipit in euismod at, congue quis libero.
Vestibulum volutpat aliquet ligula commodo dignissim. Donec laoreet quam et massa consequat scelerisque viverra turpis tincidunt. Morbi quis leo lacus, at porttitor nunc. Fusce fermentum elementum felis id viverra. Sed semper varius convallis. Duis quam lorem, facilisis id consequat in, commodo eget diam. Curabitur dolor elit, volutpat id tincidunt vel, rutrum eu arcu. Fusce scelerisque gravida porttitor. Duis accumsan porttitor fermentum. Integer fringilla tincidunt ipsum, sed condimentum diam consequat in. Maecenas malesuada lacinia nisi, eu condimentum lectus molestie pretium. Sed quam nisi, blandit non pretium in, luctus id quam. Morbi ac feugiat orci. In ac convallis ipsum.
</p>
</div>
<div id="box2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat scelerisque purus nec elementum. Maecenas tempus sollicitudin tincidunt. Integer tincidunt volutpat ullamcorper. Etiam laoreet tincidunt nunc, sit amet venenatis est rhoncus vel. Aenean enim dui, blandit eget egestas blandit, blandit id purus. Curabitur non tortor neque, et ornare elit. Mauris at nisi turpis. Vivamus tempus, enim quis posuere laoreet, elit est varius tellus, vel faucibus nunc enim vel lacus. Sed semper feugiat nisi sit amet pulvinar. Duis mattis cursus nunc vel volutpat. Etiam ornare mollis leo ac mattis.
Cras sagittis mauris mi, et pellentesque arcu. Phasellus aliquet nisi sed tortor dictum faucibus. Morbi facilisis pretium lorem, in cursus augue fringilla eu. Morbi felis lectus, commodo at fermentum eget, varius at sem. Aenean dapibus lacus eu orci mollis porttitor. Curabitur nec purus quis risus imperdiet malesuada. Suspendisse potenti. In ipsum lorem, molestie ac sollicitudin at, dignissim eget est. Curabitur arcu eros, accumsan et pretium dignissim, pellentesque eget mi. In fringilla neque pharetra leo imperdiet ut dictum odio hendrerit. Etiam ligula nisl, feugiat vel mattis vel, pulvinar vitae dui.
Cras felis massa, porttitor sed bibendum at, vestibulum in nisi. Nulla egestas hendrerit felis, accumsan imperdiet tellus commodo id. Maecenas tincidunt justo ut erat porta et faucibus ante dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida tristique tristique. Etiam non dolor mi, id eleifend odio. Sed cursus nisl ut enim dictum adipiscing sed volutpat lacus. Quisque ut quam felis, quis vulputate velit. Fusce consequat, metus sed vulputate ultricies, leo leo tempor elit, vitae fringilla odio orci id leo. Sed nec neque nisl, eu fermentum arcu. Nunc facilisis scelerisque ipsum dictum feugiat. In hac habitasse platea dictumst. Pellentesque et nisl lacus, nec vulputate turpis. Nulla volutpat faucibus arcu et dapibus. Integer in erat libero, quis dignissim magna. Mauris metus felis, suscipit in euismod at, congue quis libero.
Vestibulum volutpat aliquet ligula commodo dignissim. Donec laoreet quam et massa consequat scelerisque viverra turpis tincidunt. Morbi quis leo lacus, at porttitor nunc. Fusce fermentum elementum felis id viverra. Sed semper varius convallis. Duis quam lorem, facilisis id consequat in, commodo eget diam. Curabitur dolor elit, volutpat id tincidunt vel, rutrum eu arcu. Fusce scelerisque gravida porttitor. Duis accumsan porttitor fermentum. Integer fringilla tincidunt ipsum, sed condimentum diam consequat in. Maecenas malesuada lacinia nisi, eu condimentum lectus molestie pretium. Sed quam nisi, blandit non pretium in, luctus id quam. Morbi ac feugiat orci. In ac convallis ipsum.
</p>
</div>
</div>
</body>
</html>
http://jsfiddle.net/hLwy8/10/
http://jsfiddle.net/hLwy8/11/
overflow:hidden hack does not work in ie6!
you need old style clear:both; at the end of the container
I'm looking for a footer like facebook has but only use CSS to style it no js.
As you can see here http://dl.getdropbox.com/u/5910/Jing/2009-02-03_1256.png it always stays at the bottom even if I scroll down. http://dl.getdropbox.com/u/5910/Jing/2009-02-03_1258.png
For all browsers, save for IE6, do this:
div#footer {
bottom: 0;
width: 100%;
height: 25px;
position: fixed;
}
I know you mentioned not wanting to use JavaScript, but as for IE6, it's been my experience that you may have to resort to some sort of JavaScript expression in the CSS to get it to work as smoothly as this CSS does in other browsers.
This might do it:
http://ryanfait.com/sticky-footer/
I've used this in the past:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Fixed CSS layer sample</title>
<style type="text/css">
body
{
margin:0;
padding:0 10px 0 10px;
border:0;
height:100%;
overflow-y:auto;
}
#fixed
{
display:block;
bottom:0px;
left:0px;
right:0px;
position:fixed;
border:1px solid #888;
padding:0px;
text-align:center;
font-weight:bold;
color:#000;
background: #ccc;
width: 100%;
height: 100px;
}
* html #fixed
{
position:absolute;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div id="page">
<p><h3>Some latin text here to make the page scroll</h3></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pharetra pharetra tortor. Nunc in pede. Cras dapibus. Phasellus pede tortor, facilisis id, rutrum non, eleifend non, sem. Phasellus ut metus eu pede mollis sagittis. Cras ut justo ut metus rutrum auctor. Sed gravida consectetuer quam. Ut ligula. Suspendisse potenti. Ut et ante. Aenean mauris.</p>
<p>Praesent lorem. Praesent suscipit convallis orci. Morbi nec felis vitae est vehicula ornare. Quisque nisi neque, pretium ac, eleifend nonummy, cursus sit amet, purus. Nullam venenatis suscipit arcu. Aenean mattis enim vitae nisl. Maecenas diam pede, vehicula in, vehicula in, auctor ac, urna. Phasellus vel nibh scelerisque ante varius feugiat. Phasellus vehicula malesuada lorem. Donec elementum, elit vel cursus rhoncus, purus est nonummy leo, fermentum lacinia ante libero quis libero. Vivamus tincidunt, nulla et dapibus interdum, risus magna pharetra purus, eu adipiscing mi nisl eu massa. Donec elit arcu, scelerisque eu, suscipit quis, tincidunt ut, enim. Suspendisse eget justo vitae lectus euismod facilisis. Donec at ipsum nec mi sollicitudin viverra. Fusce accumsan, ante non dictum viverra, libero pede condimentum dolor, non congue nisl enim sit amet nulla. Aenean mollis, metus sed molestie bibendum, nulla erat tincidunt velit, non feugiat lorem mauris id mi. Mauris eleifend. Vivamus viverra. Fusce dapibus libero feugiat lorem.</p>
<p>Donec a nisl nec neque dictum varius. Aliquam consequat ipsum in dui placerat feugiat. Nam fringilla, libero ut consectetuer aliquet, lorem nisi pharetra est, eu sagittis lorem purus ac dolor. Donec aliquet mi nec augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pretium, est sed feugiat bibendum, odio ligula convallis pede, id aliquet erat turpis sit amet ipsum. Phasellus pulvinar laoreet arcu. Curabitur nunc. Ut id purus vitae lacus convallis consectetuer. Duis in quam. Praesent pharetra. In quis est a massa pretium auctor. Nam metus mi, pulvinar ac, blandit nec, suscipit semper, quam. Integer eget felis id enim sodales dictum. Phasellus quis neque. Duis cursus imperdiet lorem. Etiam eget risus et erat dapibus feugiat. Aenean gravida justo vitae lectus. Nullam aliquet. Integer et augue porttitor urna varius porta.</p>
<p>Suspendisse ultricies mauris eget velit dictum tincidunt. Maecenas id pede quis massa ornare congue. Fusce placerat odio non erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque dignissim nunc ac ipsum. Integer ac libero et risus luctus ultrices. Phasellus urna. Nunc a lorem eu diam mollis rhoncus. Curabitur velit mi, mollis sit amet, vulputate ut, varius lobortis, turpis. Nulla scelerisque euismod lacus. Phasellus vehicula justo sed diam. Sed non nisi sit amet sem posuere fermentum. Donec faucibus pede. Donec pharetra tristique lacus.</p>
<p>Maecenas luctus, nisl molestie gravida sagittis, quam augue elementum mi, vitae scelerisque lacus eros id mi. Pellentesque purus erat, hendrerit eu, suscipit eu, elementum quis, quam. Sed faucibus lorem lobortis ipsum. Nulla facilisi. In et leo et erat ullamcorper iaculis. Duis aliquet ipsum quis ligula. Sed condimentum, ipsum semper tincidunt tempus, nisi nulla congue ante, ut placerat ligula est eget risus. Nam nonummy molestie tortor. Nunc dapibus, metus id adipiscing mattis, felis enim pretium risus, ac elementum nibh massa at nulla. Duis eu dui nec lacus aliquet iaculis. Fusce et odio eu pede ultricies fermentum. Morbi pulvinar vulputate odio. Vestibulum dui ante, feugiat a, sodales at, tristique eu, dolor. Phasellus est. In in neque at lectus tristique pulvinar. Pellentesque sed nulla. Aliquam fermentum, diam eu auctor eleifend, velit elit scelerisque nulla, at dignissim odio justo id metus. Duis mattis rutrum mauris. Nullam quis nulla.</p>
<p>In justo tellus, elementum ac, aliquet egestas, luctus ac, pede. Nulla facilisi. Sed et dui. Suspendisse pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras erat lectus, fermentum at, iaculis quis, blandit non, eros. Donec libero turpis, laoreet vitae, volutpat in, molestie ac, nulla. Donec tempus. Aenean eleifend cursus velit. Duis dolor ipsum, commodo a, commodo ac, faucibus vitae, quam. Integer dignissim. Curabitur non elit. Ut aliquet eros sit amet nisi.</p>
<p>Sed consequat est vitae tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec convallis, ligula sed rhoncus viverra, augue orci commodo massa, quis laoreet nulla lacus quis velit. Suspendisse a eros in massa sodales fermentum. Aliquam a augue. Sed nonummy eros eget magna dictum venenatis. Vestibulum molestie pede sit amet neque. Duis et ante ac eros mattis ultrices. Praesent placerat felis non nisl. Curabitur eleifend, purus non rhoncus lobortis, erat felis vestibulum est, at sagittis est orci ut orci. Aliquam pretium. Pellentesque eget neque. Nam sit amet tellus.</p>
<p>Integer ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin nulla metus, auctor sit amet, semper ut, ullamcorper sit amet, eros. Maecenas aliquam metus ut metus. Suspendisse sed neque vel odio dapibus iaculis. Sed semper. Nulla et pede vel sapien laoreet interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus neque dolor, ultrices quis, molestie commodo, tempus vel, massa. Cras nec diam eleifend libero adipiscing aliquet. Duis malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum volutpat metus ac elit imperdiet tincidunt. Mauris pellentesque nunc eget lectus.</p>
<p>Proin id nunc sit amet mi lobortis aliquet. Ut eget felis sit amet nunc viverra lacinia. Maecenas ut nulla sed metus bibendum mattis. In hac habitasse platea dictumst. Aliquam consectetuer nunc vel neque. Nullam quam nisi, semper eget, faucibus nec, vehicula quis, mi. Nunc nisi. Donec massa metus, pharetra vitae, vehicula non, eleifend at, libero. Ut ac est a nunc rutrum vestibulum. Nulla gravida. Sed suscipit luctus augue. Aliquam posuere felis. Nunc interdum, nisi a blandit scelerisque, mi nibh blandit justo, et malesuada nibh ligula id ipsum. Donec a ipsum sed nunc placerat interdum. Curabitur blandit. Suspendisse varius faucibus dolor. Cras a urna. Mauris leo. Nunc pretium, pede ut posuere cursus, sapien tellus blandit massa, id vestibulum metus est vitae tellus. Maecenas urna.</p>
<p>Pellentesque tortor. Pellentesque faucibus dui vitae mauris. Pellentesque bibendum iaculis tortor. In sem purus, eleifend in, laoreet ut, tincidunt nec, magna. Mauris gravida, diam eu tincidunt fringilla, est nisi pharetra ante, non luctus justo odio a ipsum. Maecenas eu augue. Ut iaculis. Nunc arcu nunc, elementum sed, aliquam non, laoreet sed, nisl. Pellentesque felis. Suspendisse auctor tortor ut turpis. Vestibulum tincidunt laoreet neque. Phasellus odio enim, mollis vel, varius sed, imperdiet ut, tortor. Phasellus eleifend dolor ut metus. Proin est. Phasellus placerat pede rutrum libero. Suspendisse varius erat a urna convallis porta. Integer hendrerit odio id leo. Sed porta sapien suscipit sem.</p>
<p>Quisque a lorem. Duis quis tortor. Suspendisse mattis porttitor augue. Aliquam facilisis porttitor quam. In vel metus ut quam commodo viverra. Pellentesque et mauris sit amet eros adipiscing commodo. Maecenas vitae pede vitae diam viverra vestibulum. Integer suscipit, quam sit amet hendrerit porta, velit tellus rhoncus pede, eget sollicitudin arcu felis quis leo. Sed auctor blandit ligula. Fusce accumsan viverra nibh. Aliquam erat volutpat. Quisque velit velit, sagittis et, congue at, auctor eu, quam. Sed dui ipsum, rhoncus eget, commodo at, vulputate a, metus. Donec eu mi. Sed laoreet faucibus ipsum. Donec cursus egestas turpis. Nulla facilisi. Nam et tellus.</p>
<p>Praesent sagittis ligula eget lacus dictum blandit. Nam libero pede, faucibus non, vestibulum tempus, tincidunt quis, est. Vestibulum accumsan risus. Nulla facilisi. Praesent nisi turpis, pulvinar vitae, blandit vitae, hendrerit vel, ante. Morbi viverra purus dapibus quam. Donec ligula. Cras pretium metus. Nunc ac erat. Sed elit quam, cursus sit amet, egestas eget, cursus sit amet, orci. Praesent non purus non orci sodales interdum. Fusce lobortis risus eu est.</p>
<p>Quisque arcu nisl, fringilla vel, vehicula in, bibendum nec, arcu. Nullam sit amet mi nec velit cursus rhoncus. In sed ante. Aenean nec augue. Curabitur et sem laoreet dolor blandit aliquam. Mauris sollicitudin orci nec leo. Proin magna. Suspendisse eleifend, diam vitae mattis suscipit, felis risus varius massa, ut ornare eros pede nec ligula. Proin commodo, justo et egestas ultrices, tellus elit aliquam ante, a rhoncus felis risus elementum arcu. Quisque placerat mattis arcu. Etiam auctor auctor nisl. Ut sed purus. Donec semper iaculis arcu. Maecenas nulla. Sed congue euismod nulla. Vestibulum ligula justo, venenatis at, rhoncus ac, iaculis id, nunc. Morbi sit amet augue eu ipsum fermentum facilisis.</p>
<p>Nam magna. Fusce sed ante in mauris consectetuer mattis. Mauris imperdiet nibh tincidunt elit. Praesent eget lectus quis sem egestas molestie. Suspendisse potenti. Nunc mauris quam, pharetra id, gravida vitae, sodales id, lacus. Fusce lectus. Integer mollis justo. Duis vel mi et massa porttitor dictum. Donec scelerisque leo quis nulla. Sed ante ante, feugiat eget, vulputate a, dignissim quis, elit. Nam in turpis. Morbi lacus libero, varius at, dignissim id, auctor eget, urna. Cras in mauris. Vivamus felis purus, tempus at, volutpat eget, fermentum sagittis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
<p>Mauris mattis tincidunt erat. Maecenas aliquam mauris vel nulla. Morbi volutpat. Sed lorem mauris, interdum id, accumsan sit amet, consequat interdum, velit. Pellentesque ac est non sem posuere accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut vitae augue non lorem rhoncus malesuada. Phasellus viverra, leo non commodo ullamcorper, leo nibh accumsan mi, a tempus lectus lectus ac erat. Morbi ultrices mauris sit amet nunc. Donec porta nisl. Aenean tempor.</p>
</div>
<div id="fixed">[fixed footer]</div>
</body>
</html>
Might need some modification, especially to work in IE6. If I recall correctly, I had to add in some page breaks under the page content to stop the footer overlapping the content, but that aside, I think it worked fine.