The entire page scrolls when there's an overflow issue, rather than just the specific pre element

If you notice that a line in the pre-code block is too long, causing the scrollbar to appear on the entire body instead of just that element and making the whole page scrollable, then the pre element messes up the entire page as it extends beyond 100% width. The red border at the top signifies the normal 100% width of the page. How can this be prevented? I want a scrollbar that only scrolls the pre-element, not the entire body.

.container-full {
    font-family: 'Open Sans', sans-serif !important;
    background: #fff;
    color: rgb(2, 2, 2);
    box-sizing: border-box;
    width: 100%;
}

...

css

Answer №1

To ensure proper formatting of the content within a <pre> tag, you can apply a max-width and overflow property.

.container-full {
    font-family: 'Open Sans', sans-serif !important;
    background: #fff;
    color: rgb(2, 2, 2);
    box-sizing: border-box;
    width: 100%;
}

.row {
    margin-left: 0;
    margin-right: 0;
}
.top-header {
    position: relative;
    width: 100%;
}
/* More CSS styles here */

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-full">
  <div class="top-header" style="border: 1px solid red;">
  /* More HTML markup here */
</div>

For line breaks in the <pre> tag, you can also use:

white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */


.container-full {
    font-family: 'Open Sans', sans-serif !important;
    background: #fff;
    color: rgb(2, 2, 2);
    box-sizing: border-box;
    width: 100%;
}

.row {
    margin-left: 0;
    margin-right: 0;
}
.top-header {
    position: relative;
    width: 100%;
}
/* Additional CSS for styling */

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-full">
  <div class="top-header" style="border: 1px solid red;">
  /* Embedded HTML content */
</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

Excessive width of Bootstrap container

Encountering a rather simple issue: the bootstrap container inside my navbar is too wide, causing an unwanted horizontal scrollbar as it expands the body. You can view the problematic page here. The theme used for this site can be found here. What's ...

htmlcsstwitter-bootstrap

Fashionable flexbox chat design break

Can anyone explain why the image shifts to a new line when the dimensions of the bubble are restricted? If I adjust the maximum width of the bubbles to calc(100% - 70px), the image stays on the same line, but the last word may break onto a new line, disru ...

htmlcssflexbox

What is the best way to design a layout utilizing the "display: inline-block, block, or inline" properties in a style sheet?

https://i.sstatic.net/IqsRt.jpg Currently facing an issue with incorrect output. Code Snippet: <!DOCTYPE html> <html> <head> <style> .largebox { display: block; margin: 10px; border: 3px solid #73AD21; } .box1 { disp ...

htmlcss

How to address text overlapping issue in IE11 with Flexbox

When viewed in Internet Explorer, you may notice that the content of the gray box is overflowing into the yellow box, a behavior not observed in other browsers. .parent { display: block; position: relative; border: 1px solid black; height: 300px ...

cssflexboxinternet-explorer-11

Can you explain the concepts of stroke and stroke width in SVG, and how they are implemented in HTML rendering?

<svg width="400" height="400" style="background-color:green"> <circle cx="200" cy="200" r="50" stroke="red" stroke-width="5" fill="yellow"></circle></svg> <svg width="400" height="400" style="background-color:green"> ...

htmlcsssvg

Navigate to specific element from bootstrap navigation bar

I am in the process of creating a website for a small organization. The website is being constructed using bootstrap 4, and there is a navbar that connects to various flex-containers. I want these connections to smoothly scroll to their respective elements ...

javascripthtmlcsstwitter-bootstrap

Ways to modify div content depending on the size of the screen

When the screen size becomes small, my goal is to modify the content within the row divs of the indices_container. Currently, all screen sizes display the index name, price, 1-day change, and year-to-date (YTD) change for each row. I only want to show the ...

htmlcssbootstrap-4frontend

List of prices with a dotted line separating the price and product, adjusting its width based on

I am attempting to create a price list with a dotted underline between the price and product that adjusts dynamically in width. Here is my code snippet: https://jsfiddle.net/romariokbn/2gm27rv6/ <ul class="how-can-i-do"> <li> <span ...

htmlcss

Choose the sequence in which CSS Transitions are applied

Currently facing an interesting challenge, but I'm confident there's a clever solution out there. The issue at hand is with a table that has three different sorting states for its columns: unsorted, where no icon should be displayed, ascending, ...

javascriptcssreactjscss-transitionsreact-table

Learning how to effectively incorporate two matSuffix mat-icons into an input field

I'm currently experiencing an issue where I need to add a cancel icon in the same line as the input field. The cancel icon should only be visible after some input has been entered. image description here Here's the code I've been working on ...

javascripthtmlcss.netangular

Why does the Bootstrap heading momentarily collapse before quickly reappearing?

Just starting out with HTML, CSS, and Bootstrap, but struggling with getting collapse to function properly. I've attached a gif demonstrating the issue I'm facing. While using bootstrap, collapse on an H4 tag is not working as expected. Can&apos ...

htmlcssbootstrap-4

The hyperlink function is not operational in Gmail attachments

Using an anchor tag to navigate to a specific section within the same page works perfectly when the HTML file is on my local machine. However, when I attach the file in Gmail and open the attachment, it doesn't work. Why is this happening? How can I m ...

javascripthtmlcss

Developing a unique attribute using AngularJS

As a beginner in AngularJS, I am experimenting with creating directives to manipulate the background-color of a <div> based on specific conditions. I aim to write code like this within my view: <div effect-color="#2D2F2A">content here</div& ...

javascriptcssangularjs

Align text vertically within a single flex container in Bootstrap

I am working on a simple card design that is divided into 3 sections: <div class="card" style="width: 350px; height: 250px;"> <div class="card-body"> <div class="d-flex flex-column" style="h ...

csstwitter-bootstrapbootstrap-5

Does CSS media:print show elements that were not visible on the screen?

Here is my issue: @media print { DIV { display: block; } } <html> <body> <div style="display:none">You can't see me!</div> </body> </html> Despite trying the above code, I am unable to view "You can&apos ...

htmlcss

Blank areas on a document

I've recently started learning HTML and CSS, and I've encountered a problem that has me stuck. HTML: <div class = "window"> <form> <input class="button" type="submit" value="Login" /> </form> ...

htmlcss

Tips on customizing a row in a table

Having a small issue styling a row in my table. Essentially, the table consists of 4 rows. a) If the data under column Title 5 is below 0, then the entire row should display in red color. b) If the data under column Title 5 is equal to 17, then the compl ...

cssangulartypescriptprimengprimeng-datatable

Conceal the excess content by placing it behind a series of stacked div

Within my layout, there is a fixed div called #navigation that houses buttons. Alongside this, there is scrollable content in the form of .card elements. The #navigation div currently displays with a green background for demonstration purposes, as shown b ...

javascriptjqueryhtmlcss

How to customize the page background color in Next JS

I am currently working on a project using Next Js and have encountered an issue. I have a global.css file set up in the project, but I need to change the background color of a specific page without affecting the rest of the project. Although I have tried u ...

cssnext.js

Browser resize affects the overlap of DIVs

I've seen similar posts before, but I believe the issue with my website (***) is unique. At full size, the website looks exactly how I want it to. However, when I resize the browser window, the text ("ABOUT INTERNATIONAL PARK OF COMMERCE.." and below ...

htmlcsswordpressoverlap