How to make my container scrollable while keeping the text displaying partially outside of the container
I am trying to make a div element vertically scrollable while maintaining the header text to appear partially outside the div element like this:(https://i.sstatic.net/B95r6Fzu.png)
This is my code currently without the scrollbar on the div element:
<style>
h1 {
font-family: swirlgarden;
font-size: 55px;
text-align: center;
color: #3d729e;
position: absolute;
top: -150px;
}
.box {
position: relative;
width: 950px;
height: 700px;
background-color: #fffaf0;
border: 5px;
border-style: solid;
border-color: orange;
margin: auto;
margin-top: 100px;
}
</style>
<div class="box">
<h1><br>Summer Knowledge</h1>
</div>
However, when I add overflow-y:scroll to the .box style code, it breaks the text so that it ends up looking like this:(https://i.sstatic.net/bmeLVDVU.png)
This is my style code when I add the scroll bar:
.box {
position: relative;
width: 950px;
height: 700px;
background-color: #fffaf0;
border: 5px;
border-style: solid;
border-color: orange;
margin: auto;
margin-top: 100px;
overflow-y: scroll;
}
I want to have the vertical scrollbar while maintaining the way the text was before but Im not sure how.
Answer
How about adding an extra <div> inside the box to hold the scrollbar? like this:
.outer-box h1 {
font-family: swirlgarden;
font-size: 55px;
text-align: center;
color: #3d729e;
position: absolute;
top: -92px;
}
.outer-box {
position: relative;
width: 950px;
height: 700px;
background-color: #fffaf0;
border: 5px;
border-style: solid;
border-color: orange;
margin: auto;
margin-top: 100px;
}
.inner-box {
width: 100%;
height: 100%;
overflow-y: scroll;
}<div class="outer-box">
<h1>Summer Knowledge</h1>
<div class="inner-box">
</div>
</div>That way you don't disturb the header text in any way. Nesting <div> like this is quite normal. Of course there are other ways to solve this issue as well.
Please consider not using fixed pixel sizes for your layout. Have a look at the meaning of responsive web design. It can be a bit overwhelming at first, but there are many libraries to help with this, for instance: Bootstrap, see the "Layout" section in the documentation.