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;
}
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 10 months ago.
My aim is to have the height of the container limited to that of the image, with the overflow becoming scrollable on the y-axis.
I have tried grid-template-columns: repeat(2, minmax(0, min-content)) but to no avail.
Can some help me out? Such a small styling bug has been bugging me all day ;)
What i'm currently dealing with:
What i'm aiming for:
So, you want the height of the grid to be determined by the height of the image in the right column, not the height of the text in the left column? In that case, you need to remove the text from the flow by wrapping it in an element with position: absolute;. That way, its characteristics don’t affect the rest of the layout.
When you run this snippet, make sure you then click Full Page to see the effect properly.
body {
margin: 1em;
}
.g1 {
margin: 1em 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 1em;
}
.w1 {
position: relative;
}
.w2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
.w2 p:first-child {
margin-top: 0;
}
.w2 p:last-child {
margin-bottom: 0;
}
header, footer {
background-color: cyan;
padding: 1px 1em;
}
<header>
<p>Before</p>
</header>
<div class="g1">
<div class="w1">
<div class="w2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus velit ut metus pellentesque, non tincidunt erat sagittis. Donec mi justo, venenatis sed urna quis, consectetur vulputate lorem. Cras id ipsum at tellus porttitor egestas sit amet id eros. Phasellus aliquet nunc vel consectetur iaculis. Etiam dapibus, tellus sit amet consequat ultricies, sapien ante molestie tellus, nec tincidunt arcu ante vitae diam. Nam sed eros eu tellus gravida ultrices. Pellentesque vestibulum mauris ante, in vehicula massa lobortis sit amet. Nunc vitae mattis dui, quis porttitor justo. Phasellus sed suscipit sapien, ut tincidunt nibh. Phasellus rhoncus, magna quis faucibus malesuada, ipsum augue convallis diam, eu aliquam metus dolor non ante. Mauris accumsan dolor eu magna venenatis, et rhoncus orci varius. Sed eu urna eu tellus elementum mollis ac sit amet felis. Nam ultricies mi mattis nisi interdum lobortis. Nam tincidunt vehicula pretium.</p>
<p>Suspendisse eget aliquet ligula, at molestie dolor. Etiam scelerisque ac orci at scelerisque. Etiam arcu nisi, condimentum id erat viverra, mollis rutrum arcu. Proin ut mi aliquam, dictum nibh ac, varius massa. Aenean vitae ultrices purus. Phasellus eu tellus pretium, fringilla nunc eget, porttitor massa. Nulla pretium commodo velit id scelerisque. Vivamus faucibus volutpat purus id accumsan. In venenatis viverra vehicula. Phasellus quam leo, luctus nec consectetur vel, tincidunt ultrices urna. Integer tristique rutrum arcu, non placerat sapien luctus ut. Proin scelerisque dui ligula, vehicula maximus dolor scelerisque vitae. Curabitur ornare, lectus non ornare venenatis, odio sapien pulvinar erat, a luctus mi lacus vel ante. Sed eu porttitor erat.</p>
<p>Integer gravida maximus magna non finibus. Etiam mollis, nisl in dignissim interdum, nibh purus fringilla diam, sit amet luctus tortor arcu quis nibh. Maecenas consequat massa et libero luctus, nec gravida erat tincidunt. Praesent sed porttitor turpis. Morbi imperdiet finibus tellus, et dignissim neque vulputate in. Mauris vel vulputate sapien. Duis maximus velit at porta varius. Sed vitae gravida arcu, a condimentum leo. Maecenas elementum enim nibh, sed blandit urna pulvinar sit amet. Pellentesque vel efficitur dolor. Etiam at mollis nibh, ac rutrum nunc. Pellentesque auctor eget lorem ac suscipit. Quisque enim tellus, iaculis sit amet enim in, aliquet malesuada erat. Nullam venenatis at ligula sodales rhoncus. Nulla non velit quis tellus finibus pellentesque scelerisque sed ante.</p>
<p>In rutrum, felis vel fermentum malesuada, turpis ex semper nunc, eu tincidunt mauris nulla vel leo. Ut bibendum arcu urna, nec hendrerit nulla finibus ac. Proin ultrices tortor ac dolor consequat interdum. Curabitur at egestas lorem. In risus massa, faucibus at est sit amet, interdum convallis nulla. Sed ultricies leo lacus, sed pharetra risus porttitor vitae. Nunc tempus urna in dui egestas, eget eleifend lorem finibus. Pellentesque auctor nec est et rutrum. Fusce quis tincidunt lacus. Proin efficitur augue sed eleifend venenatis. Aenean mattis sed odio sit amet lobortis. Vivamus nibh arcu, scelerisque ac purus in, fringilla scelerisque orci.</p>
<p>Praesent volutpat ac justo a luctus. Sed eget orci risus. Sed faucibus turpis id ligula congue facilisis. Nulla facilisi. Aliquam egestas rutrum risus id varius. Etiam ac lacinia mi. Mauris sit amet facilisis arcu. Pellentesque metus nibh, vulputate vel dui fringilla, pellentesque dictum sapien. Praesent interdum nisl at sollicitudin maximus. Morbi ligula odio, hendrerit at risus condimentum, dictum mollis lectus. Sed lacinia rutrum maximus.</p>
<p>Sed orci nisl, cursus lobortis condimentum aliquet, rutrum et metus. Vestibulum sit amet dui mi. Mauris eleifend nisi nec elit euismod tristique. Sed feugiat, quam ac finibus pellentesque, orci dolor auctor nibh, vel pharetra odio mi at magna. Proin sed sapien a sapien consequat dapibus ut quis nulla. Maecenas sit amet feugiat metus, in dictum dolor. Ut sed condimentum dolor, nec congue sapien. Etiam aliquet tellus vitae nibh iaculis consectetur. Curabitur quis fermentum urna. Fusce varius ut erat et cursus. Donec nisl quam, placerat in porta id, ultrices ut diam. Aliquam nec lectus hendrerit arcu maximus egestas nec eu nisl. In id ex in risus vulputate aliquam eu sed ligula. Morbi vel blandit leo, commodo vulputate urna.</p>
<p>Donec facilisis vel lectus vel dapibus. Sed cursus felis vitae porttitor commodo. Quisque et nisi nec metus iaculis facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit ut tellus pulvinar elementum in ac nisl. Vivamus sagittis ligula ac egestas semper. Integer at gravida ipsum, et molestie ipsum. Etiam vitae metus ut felis vehicula gravida eget vel turpis. Quisque luctus, nibh a lacinia luctus, augue mauris suscipit ex, pulvinar ornare eros nisi ut urna. Phasellus vitae volutpat justo. Nullam ac elit dolor.</p>
<p>Etiam congue odio nunc, a mattis enim ornare eget. Quisque et sodales quam. Aliquam sollicitudin enim non enim interdum consectetur. Nullam bibendum mi sed massa euismod, pulvinar auctor magna dictum. Donec et lorem finibus, vehicula urna eget, ullamcorper massa. Mauris sem orci, dapibus sed consequat sit amet, malesuada et elit. Integer sit amet massa quam. Cras semper pellentesque urna, eget efficitur odio vestibulum vitae. Maecenas semper, sapien sit amet lobortis venenatis, ligula mauris placerat purus, at congue augue sem id mauris. Etiam gravida elit ut rhoncus varius. Ut nec est metus. Maecenas quis posuere diam. Pellentesque quis nulla interdum, consectetur ipsum eleifend, ultrices libero. Morbi tincidunt mauris at lorem egestas imperdiet quis ut est.</p>
</div>
</div>
<div>
<img src="https://onlinepngtools.com/images/examples-onlinepngtools/body-builder.png">
</div>
</div>
<footer>
<p>After</p>
</footer>
I'm making a page with some text, but I want to insert an image to the right of the text. I managed to make the text wrap around the image, but it seems I cannot move the image except right and left of the text. I would like to move vertically the image.
And here is my code for the image:
img {
width: 20%;
height: auto;
margin: 10px;
}
#test {
float: right;
}
<img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur
lorem. Nam condimentum neque in tempor sollicitudin. Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque
varius dapibus mi. Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo. Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor. Aliquam a dolor
ac massa tempus mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl
dapibus non. Morbi urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur
non magna libero. Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus
finibus ornare. Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor
ornare, ultricies magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur. Sed semper lacus
lectus, sagittis rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien.
Suspendisse volutpat vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce
lobortis enim ac nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc,
sagittis eu tempor in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>
Could someone help me ?
shape-outside can do it
img {
width: 20%;
height: auto;
margin: 10px;
float: right;
/* use the same value inside margin and shape-outside */
shape-outside: inset(100px 0 0 0);
margin-top: 100px;
}
p {
text-align: justify;
}
<img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur lorem. Nam condimentum
neque in tempor sollicitudin. Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque varius dapibus mi.
Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo. Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor. Aliquam a dolor ac massa tempus
mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl dapibus non. Morbi
urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur non magna libero.
Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus finibus ornare.
Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor ornare, ultricies
magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur. Sed semper lacus lectus, sagittis
rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien. Suspendisse volutpat
vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce lobortis enim ac
nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc, sagittis eu tempor
in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>
You can move the image down, while still keeping it floated right, by positioning it in amongst the text. However, where it exactly appears in relation to the surrounding text depends on the viewport dimensions i.e. how the text can round it.
img {
position: relative;
width: 20%;
height: auto;
margin: 10px;
}
#test {
float: right;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur lorem. Nam condimentum neque in tempor sollicitudin. <img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png"/>Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque varius dapibus mi. Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo.
Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor.
Aliquam a dolor ac massa tempus mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl dapibus non.
Morbi urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur non magna libero. Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus finibus ornare. Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor ornare, ultricies magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur.
Sed semper lacus lectus, sagittis rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien. Suspendisse volutpat vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce lobortis enim ac nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc, sagittis eu tempor in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>
Goal:
Make the candy picture as a link that the user can press them.
Problem:
I don't know how to do it based on the code below.
Info:
*Please remember that the link is a actionlink from asp.net mvc.
*Please remember that it is the candy picture should be the link, not the text.
*Dont forget to make the page into a full screen after you have pressed the "Run the snippet"
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<div id="foo">
aaa
</div>
<div id="fooo">
bbb
</div>
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<a href="#" id="foo">
<span>aaa</span>
</a>
<a href="" id="fooo">
<span>bbb</span>
</a>
You would need to use Url.Action to get the URL corresponding to the relevant action. The following code snippet would map to the "Foo" and "Fooo" actions of your controller.
<a id="foo" href='#Url.Action("Foo", "ControllerName")'>
<span>aaa</span>
</a>
<a href='#Url.Action("Fooo","ControllerName")' id="fooo">
<span>bbb</span>
</a>
seeing the containing div is position fixed, you can make the a tag absolute and define left, right, top and bottom...
#foo a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px
}
I bet that's the shortest way. But i really don't like inline js...
Still:
<div
onclick="javascript:window.location.href='#Url.Action("Foo", "ControllerName")';
return false;"
id="foo">
</div>
Also it's better to add div { cursor: pointer; } to your css, if you want to show that's the href.
I need to make the text justified and the last line aligned to the right, here's what I've done:
CSS:
p{
text-align:justify;
direction:rtl;
}
HTML:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt gravida efficitur. Mauris auctor, lacus quis maximus viverra, arcu leo posuere magna, eget convallis lectus arcu vel diam. Nam sed diam eu ligula faucibus aliquam non eget tellus. Integer suscipit interdum enim, eu feugiat lectus cursus ac. Nunc ipsum lacus, rutrum eu neque in, ornare tristique nulla. Aenean convallis, metus non hendrerit convallis, magna tortor consequat velit, in laoreet tortor felis eu purus. Vestibulum venenatis, neque a hendrerit tristique, tellus urna convallis orci, ac sagittis magna nisl at est.</p>
<p>Duis dapibus lorem et tincidunt rutrum. Aliquam id ante venenatis massa egestas egestas. Quisque purus mauris, congue vitae nunc ac, vulputate vehicula massa. In in ullamcorper tortor, eu euismod felis. Donec suscipit pellentesque velit, in auctor mauris gravida id. Nunc at iaculis arcu. Etiam sed nibh eu urna auctor ullamcorper et non odio. Morbi vel augue id libero sollicitudin commodo at a ex. Proin fermentum augue at mattis consequat. Curabitur consectetur, nisi semper accumsan pellentesque, mi sapien maximus erat, eu venenatis dolor ipsum euismod nisi. Donec ut odio leo.</p>
JSFIDDLE:
https://jsfiddle.net/u1nbg939/1/
The problem is that it's messing up with the last line punctuation, it's going to the beginning of the line.
Any alternative (a cross browser one)?
I've been wondering if this is possible. A block of text surrounding an image. In this case it is circlular. I have been able to nudge text to the side using the shape but not entirely encase it.
I have only managed to find one example and I was unable to recreate it from the example actually given:
I don't know a way of wrapping text around a cicle the way it is done in your mokup. As commented, for a better user experience, the text should be seperated in two paragraphs and wrapped on each side of the circle. In this configuration you can wrap the text around the circle. But beware this solution has very poor browser support.
This approach uses the shape-outside property as shown in this answer and will only work in modern webkit browsers :
DEMO
body{margin:0;padding:20px;width:830px;margin:0 auto;}
p{
width:400px;
margin-right:15px;
text-align:justify;
overflow:hidden;
float:left;
}
p:before{
content:'';
width: 200px;
height: 600px;
}
#left:before{
float:right;
shape-outside: circle(40% at 100% 50%);
}
#right:before{
float:left;
shape-outside: circle(40% at 0 50%);
}
<p id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida. Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus. Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus. Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida. Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus. Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus. Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>