Placing text in a box in the corner while maintaining the ability to scroll

I'm looking for a solution to wrap text around a toolbox while keeping the total height limited and allowing the text to scroll. The challenge is to have the corner box stay fixed in the corner without scrolling along with the text. How can I achieve this? When I try using overflow-y: scroll, the layout breaks like this:

.box {
  width: 100px;
  height: 40px;
  float: right;
  clear: both;
}

#blue {
  background-color: blue;
}

#text {
  height: 120px;
  overflow-y: scroll;
}
<div id='blue' class='box'></div>
<div id='text'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

htmlcss

Answer №1

You can structure the layout by creating a parent div for the box and text elements. Utilize sticky positioning on the blue box with position: sticky;

I believe this solution satisfies your requirements

.box {
    width:100px;
    height:40px;
    float:right;
    clear: both;
}

#blue {
    background-color:blue;
    position: sticky;
    top: 0;
}

#text {
}
.container{
    height: 120px;
    overflow-y: auto;
}
<div class="container">
 <div id='blue' class='box'></div>
  <div id='text'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to employ a method to eliminate a specific valuable element 'this' from an array?

I am working on a task management app that allows users to create a To-Do list and remove specific items from the list. Currently, I am facing an issue with using 'localStorage' to save the list when the page is refreshed. The problem arises when ...

javascriptjqueryhtml

Is it possible to achieve a height transition using CSS instead of relying on JavaScript

I created these custom cards using a combination of HTML, CSS, and JavaScript. However, I've noticed that the height transition animation is not as smooth as I'd like it to be, especially on certain pages. Is there a way to achieve this animation ...

javascriptjqueryhtmlcss

Access the style of the first script tag using document.getElementsByTagName('script')[0].style or simply refer to the style of the document body with document.body.style

Many individuals opt for: document.getElementsByTagName('script')[0].style While others prefer: document.body.style. Are there any notable differences between the two methods? EDIT: Here's an example using the first option: ...

javascriptcssstyles

How can I utilize jQuery to iterate through every anchor tag on an HTML page?

I am looking to reference all anchor tags on the page that have a parent h2 tag. To achieve this, I need to iterate through each anchor tag that has a parent h2 and add an attribute using jQuery. <body> <h1>not me</h1> <a href ...

javascriptjqueryhtmlcss

How to dynamically insert variables into a separate HTML file while creating a VS Code extension

Currently working on a vscode extension, I'm facing an issue with containing the html in a string (like this: https://github.com/microsoft/vscode-extension-samples/blob/main/webview-view-sample/src/extension.ts). It leads to a large file size and lack ...

htmltypescriptvscode-extensionsstring-interpolation

Scrollbar visibility issue

Recently, I came across a curious behavior regarding browser scrollbars. To see it in action, check out this link. HTML: <div class='container'> <div class='fix' /> </div> CSS: body { margin: 0; } .container ...

htmlcssscrollbar

Incorporation of a dynamic jQuery animation

I'm a beginner in jquery and I'm attempting to achieve the following: I want each menu to collapse separately when the mouse hovers over it. The issue is that both menus collapse simultaneously! I know it's probably something simple, but I ...

javascriptjqueryhtmlcss

Updating an Image Using JavaScript

Having trouble changing an image using JavaScript. Followed instructions to use document.getElementbyId("image").src = "image2.jpg", but it's not working. Script is placed at the bottom after the image tag in the HTML. HTML code: ...

javascripthtml

What is the best way to incorporate tooltips in SVG?

My teacher wants me to display a tooltip on an SVG circle with links and information when we hover over it. They suggested using jQuery UI, but I've done extensive research and nothing has been able to assist me so far. ...

javascripthtmlcss

Secondary menu supersedes primary dropdown menu

Having trouble getting a vertical dropdown menu to work properly, with the submenus overriding the main menu. I've searched everywhere for a solution but can't seem to find one. Anyone out there who could help me figure this out? Here's the ...

htmlcss

Incorporate an Ajax request onto an existing link within a div element

Here is what I have: <div id="div-for-ajax-onclick"> <a href="http://www.google.com">Link to google</a> </div> $("#div-for-ajax-onclick").click(function() { // update database }); I am looking for a solution where if someone c ...

javascripthtmlajaxhyperlink

Converting JavaScript variable values to PHP variables by extracting the content of a textarea

Currently, I'm developing a data filtering mask which triggers when the button <input type="button" /> is clicked. In this process, I have: School classes (1, 2, 3, 4, 5) Sections (A, B, C....Z) Checkboxes for male and female sexes. This ma ...

javascriptphphtmlmysql

The most effective way to align text in a right-to-left language is by utilizing the text-align property with a

If the project is in a right-to-left language (such as Persian or Arabic), which method is preferable for setting text-align: right and direction: rtl? Option 1: Implement globally, for example: body * { direction: rtl; text-align: right; } ...

css

The app is opening the index.html file instead of the expected index.jsx file

After creating a page with React.jsx, I encountered an issue where my page was initially opening index.jsx upon running npm start. However, when I deleted and then restored the index.html file to "public", the page started opening index.html instead. This ...

htmlreactjsnpmjsxdelete-file

Accessing html form elements using jQuery

I'm having trouble extracting a form using jQuery and haven't been able to find a solution. I've tried several examples, but none of them display the form tags along with their attributes. Here is a sample fiddle that I've created: Sam ...

javascriptjqueryhtml

What is the trick to getting the <label> and <input> elements to show up side by side in an HTML form?

I am designing a registration form for a new website. My goal is to have each label and its corresponding input element displayed on the same line. Here's the CSS code I'm using: #registration-form { background-color: #FFF; height: 600px; ...

htmlcssforms

Having trouble creating multiple PDFs with mPDF without having to store them on the server

I am creating several PDF files in a loop using the mPDF library. Here is a snippet of my code: for($i=0;$i<=3;$i++) { $mpdf = new mPDF(); $stylesheet = file_get_contents('style.css'); $mpdf->WriteHTML($stylesheet,1); $mpd ...

phphtmlmpdf

What is the best way to retrieve a value from a database and display it in a radio

Can you help me figure out how to implement this functionality? I have a database with a "boolean" field that stores 0 or 1 values. On an HTML page, there is a radioButton with options for OK or NO. I need to dynamically load the boolean value from the dat ...

javascriptphphtmlmysqldatabase

Having trouble getting CSS styles to work properly in conjunction with Javascript code

Currently, I am developing a feature on a canvas that covers the entire webpage's width and length. In this canvas, I have the ability to create boxes by clicking down anywhere on the canvas, dragging my mouse in any direction, and upon releasing the ...

javascriptcsseventscanvasmouse

Several radial progress charts in JavaScript

While attempting to recreate and update this chart, I successfully created a separate chart but encountered difficulties with achieving the second progress. The secondary chart <div id="radial-progress-vha"> <div class="circle-vha ...

javascriptjquerycssprogress-barprogress