I want the text to not wrap white-space: nowrap and for overlapped content to be hidden overflow: hidden, but I DO still want there to be 20px padding on either side (eg, text in coloured boxes to be 20px away from edges).
I couldn't seem to find a good answer on SO already. Pointers would be much appreciated.
.row {
display: flex;
gap: 10px;
}
.col {
background: blue;
padding: 0 20px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
}
.col:nth-child(2) {
background: red;
}
<div class="row">
<div class="col">
<p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
<p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
</div>
<div class="col">
<p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
<p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
</div>
</div>
The overflow should be set on the <p>:
.row {
display: flex;
gap: 10px;
}
.col {
background: blue;
padding: 0 20px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
}
.col > p {
overflow: hidden;
}
.col:nth-child(2) {
background: red;
}
<div class="row">
<div class="col">
<p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
<p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
</div>
<div class="col">
<p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
<p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
</div>
</div>
I am writing an sticky cookie bar and with a click button (a huge X).
But the X is to much to the right (almost not on the page).
How can I make sure the X is aligned the right way
Firstly I have made the sticky div for the cookie bar.
On the left I have the information about the cookie bar.
But on the right I want to make it closable
.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background-color: #242421;
padding: 10px;
width: 100%;
font-size: 20px;
position: fixed;
opacity: 0.9;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.sticky p {
font-size: 14px;
}
.sticky u {
font-weight: bold;
}
.sticky button {
float: right;
background: none;
border: 0;
box-sizing: border-box;
color: transparent;
cursor: pointer;
line-height: 40px;
outline: none;
overflow: hidden;
padding: 0;
position: relative;
text-transform: uppercase;
transition: all 0.2s ease-in;
width: 40px;
}
.sticky button::before,
.sticky button::after {
background-color: white;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
transform-origin: center left;
transition: all 0.2s ease-in;
width: 100px;
z-index: -1;
}
.sticky button::before {
top: 0;
transform: rotate(45deg);
}
.sticky button::after {
bottom: 0;
transform: rotate(-45deg);
}
.sticky button:hover {
color: black;
}
.sticky button:hover::before,
.sticky button:hover::after {
height: 30px;
transform: rotate(0deg);
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sticky">
<p>My Text <u>More
information
and cookie settings</u>
<button>
Close
</button></p>
</div>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu,
lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi,
sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d
</p>
</body>
</html>
You actually do not use position: sticky this property is overridden by position: fixed. Also the width: 100%of the fixed container is making the element too wide, as you want to use a padding of 10px. You may either use box-sizing: border-box; or this: where only leftand right is used.
.sticky {
bottom: 0;
background-color: #242421;
padding: 10px;
font-size: 20px;
position: fixed;
opacity: 0.9;
left: 0;
right: 0;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.sticky p {
font-size: 14px;
}
.sticky u {
font-weight: bold;
}
.sticky button {
float: right;
background: none;
border: 0;
box-sizing: border-box;
color: transparent;
cursor: pointer;
line-height: 40px;
outline: none;
overflow: hidden;
padding: 0;
position: relative;
text-transform: uppercase;
transition: all 0.2s ease-in;
width: 40px;
}
.sticky button::before,
.sticky button::after {
background-color: white;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
transform-origin: center left;
transition: all 0.2s ease-in;
width: 100px;
z-index: -1;
}
.sticky button::before {
top: 0;
transform: rotate(45deg);
}
.sticky button::after {
bottom: 0;
transform: rotate(-45deg);
}
.sticky button:hover {
color: black;
}
.sticky button:hover::before,
.sticky button:hover::after {
height: 30px;
transform: rotate(0deg);
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sticky">
<p>My Text <u>More
information
and cookie settings</u>
<button>
Close
</button></p>
</div>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu,
lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi,
sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
</p>
</body>
</html>
Just add
margin-top:-10px;
width: 50px;
To the sticky button.
Just clear some of the top margins, and increase the width by 10px so that when you hover over it, the text is also aligned.
Also, don't use position: sticky;, position:fixed is well suited for this purpose and also add
box-sizing: border-box;
to your whole div to include the padding and border in the element's total width and height.
.sticky {
bottom: 0;
background-color: #242421;
padding: 10px;
width: 100%;
font-size: 20px;
box-sizing: border-box;
position: fixed;
opacity: 0.9;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.sticky p {
font-size: 14px;
}
.sticky u {
font-weight: bold;
}
.sticky button {
float: right;
background: none;
border: 0;
box-sizing: border-box;
color: transparent;
cursor: pointer;
line-height: 40px;
outline: none;
overflow: hidden;
padding: 0;
position: relative;
text-transform: uppercase;
transition: all 0.2s ease-in;
margin-top: -10px;
width: 50px;
}
.sticky button::before,
.sticky button::after {
background-color: white;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
transform-origin: center left;
transition: all 0.2s ease-in;
width: 100px;
z-index: -1;
}
.sticky button::before {
top: 0;
transform: rotate(45deg);
}
.sticky button::after {
bottom: 0;
transform: rotate(-45deg);
}
.sticky button:hover {
color: black;
}
.sticky button:hover::before,
.sticky button:hover::after {
height: 30px;
transform: rotate(0deg);
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sticky">
<p>My Text <u>Meer
informatie
en cookies instellen</u>
<button>
Close
</button></p>
</div>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,
facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae
dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla
et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis
in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna
a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non
fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula
venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus
congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh
tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi,
sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus.
Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.
In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum
augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet
sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque
enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit
risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas
nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum
nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim
ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum
augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet
sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque
enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit
risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas
nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum
nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
</p>
</body>
</html>
Run code snippetHide results
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
</style>
</head>
<body bgcolor="#00CC99">
<div style="position: relative; min-height: 600px; height: auto; width: 800px; border: 3px solid #000000; padding: 10px;">
<div style="position: relative; display: inline-block; min-height: 500px; width: 300px; border: 3px solid #000000; overflow: auto; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
<div style="position: relative; display: inline-block; min-height: 500px; width: 400px; border: 3px solid #000000; overflow: auto; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
</div>
</body>
</html>
Clearly, the nested div on the left is the shorter of the two. How can I make sure that the left div can stay at the same level from the top as the div on the right?
Setting vertical-align:top in the styles of the first (left) div works in Chrome and Firefox (didn't try IE or Safari, I assume Safari works).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
</style>
</head>
<body bgcolor="#00CC99">
<div style="min-height: 600px; height: auto; width: 800px; border: 3px solid rgb(0, 0, 0); padding: 10px; overflow: auto;">
<div style="min-height: 500px; width: 300px; border: 3px solid rgb(0, 0, 0); overflow: auto; padding: 10px; float: left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
<div style="min-height: 500px; width: 400px; border: 3px solid rgb(0, 0, 0); overflow: auto; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
</div>
</body>
</html>
Hope this solves your issue.