Text positioned in a fixed location

How can I ensure that the main content stays on the right side of the sidebar without adding margin-right?

Currently, the sidebar is being covered by the body content due to its fixed position. Is there a solution to prevent this issue?

.App {
  display: flex;
}

.s {
  position: fixed;
}
<div class="App">
  <div class='s'>sidebar</div>
  <div class='m'>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    ...
    <p>data</p>
  </div>
</div>

htmlcss

Answer №1

Instead of using the outdated method, try implementing position:sticky.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.App {
  display: flex;
}

.s {
  position: sticky;
  top: 0;
  border: 1px solid red;
  align-self: flex-start;
  min-height: 100vh;
}
<div class="App">
  <div class='s'>sidebar</div>
  <div class='m'>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
   ... (remaining content)
  </div>
</div>

Answer №2

To create a fixed-width sidebar, you can enclose it in an element with a specific width.

.App {
  display: flex;
}

.s1 {
  width: 120px; /* Adjust the width as needed */
}

.s {
  position: fixed;
}
<div class="App">
  <div class="s1">
    <div class='s'>sidebar</div>
  </div>
  <div class='m'>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    ...
    <p>data</p>
  </div>
</div>

Answer №3

To make the layout work, consider setting a width for app and utilizing margin-left: auto; for your content.

.App {
  display: flex;
  width: 100px;
}

.s {
  position: fixed;
}

.m {
  margin-left: auto;
}
<div class="App">
  <div class='s'>sidebar</div>
  <div class='m'>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
    <p>data</p>
  </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

Implement Bootstrap and CSS to ensure that my content appears below the header when users scroll down

I am struggling with a simple HTML page that is working well with CSS, but encountering an issue where the input form gets placed above the header when scrolling down. I want the header to always remain above the content even while scrolling. Any suggesti ...

htmlcss

How can I ensure that my image remains responsive and aspect ratio-friendly?

Is there a way to accomplish this magical effect? I find myself in a similar situation. I require an image that remains centered while adjusting to fit the screen, all while maintaining its aspect ratio. ...

htmlcssimageaspect-ratio

Unable to add the div using a jQuery click event

Hey there, I'm looking to add a div dynamically when clicking on another div. Check out the code snippet below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title></title> <script src= ...

javascriptjqueryhtml

What is the best way to position the label above the input text in a Material UI TextField component with a Start Adornment?

Struggling to figure out the right Material UI CSS class to style a reusable TextField component? You're not alone. Despite tinkering with InputLabelProps (specifically the shrink class), I can't seem to get it right. Here's the code snippet ...

cssreactjsmaterial-ui

Customize arrow direction in AntDVue ant-collapse using simple CSS styling

Is there a way to customize the arrow directions in ant-collapse vue? I recently faced an issue where I couldn't change the arrow directions without using !important (which I try to avoid). Fortunately, we found a workaround for this problem at my wo ...

csssassvuejs2nuxt.jsantd

Is there a method to retrieve the subdirectories and files currently present on a given URL?

Picture having a file on your system with the following URL: I am curious if there is any software, command, or script that can retrieve subfolders/files based on a given URL. For instance: Input parameter: http://my.page/folder_1/ Output: http://my.p ...

javascripthtmlbashwebnetworking

Comparison of the "Proposed Recommendation" versus the "Candidate Recommendation"

In a recent piece about HTML5, it was mentioned that the Proposed Recommendation date is set for 2022, while the Candidate Recommendation date is from 2012. I'm curious to understand the distinction between the "Proposed Recommendation" and the "Cand ...

htmlw3c

Stop the form submission until validation is complete

I'm currently working on a form and encountering some validation issues. HTML: <form id="regForm" class="form-group" method="POST" action="signup.php"> <div class="col-md-12"> <h2>Job Pocket</h2> </div> <di ...

javascripthtml

Leveraging python's BeautifulSoup library, one can easily implement HTML selection

Recently, I've started diving into Automate the Boring Stuff and exploring how to create my own programs. Currently, I'm experimenting with beautiful soup's 'select' method in order to extract the value '33' from this cod ...

pythonhtmlcssbeautifulsoup

"Seeking assistance with concept sharing and content transmission. In need of guidance

Basic Question I'm stuck trying to brainstorm a concept to reach my objective. I am having trouble figuring out how to navigate the DOM correctly with my chosen method. The Objective First, let me explain what I am doing: I use ajax to bring HTML ...

javascriptajaxhtmlinnerhtmlecmascript-5

``Is there a way to retrieve the file path from an input field without having to submit the form

Currently, I am looking for a way to allow the user to select a file and then store the path location in a JavaScript string. After validation, I plan to make an AJAX call to the server using PHP to upload the file without submitting the form directly. Thi ...

phpjavascripthtmlformsfile-upload

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

The issue I'm facing is with the hiddenColumns option not working as expected. Even when I set it to hiddenColumns:['name'], the name column remains visible. I've updated to the latest version, but the problem persists. UPDATE I am tr ...

javascripthtmlvue.jsvue-tables-2

Clicking on the anchor at the bottom of the page will smoothly navigate you to the top of the page

I added an anchor at the bottom of the page. I wrapped a group of buttons with the link so that when clicked, they trigger the assigned JavaScript and scroll to the bottom of the page. However, the buttons currently execute the JavaScript but then take you ...

javascripthtml

Arrange an item independently of surrounding elements

Is it possible to position an element across two columns, starting in the middle of the second column? The columns are defined by divs. Could this be achieved through z-index positioning? ...

css

Position the spinner in the center of the user's screen

I created my own spinner: '''' #spinner-bg-loading{ position: absolute; left: 50%; top: 25%; width: 80px; height: 80px; margin: -75px 0 0 -75px; border: 16px solid #FFFFFF; border-radius: 50%; border-top: 16px solid #1 ...

javascripthtmlcss

Changing the size of an image in an HTML5 canvas

I have been attempting to generate a thumbnail image on the client side using Javascript and a canvas element. However, when I reduce the size of the image, it appears distorted. It seems as though the resizing is being done with 'Nearest Neighbor&apo ...

javascripthtmlcanvasimage-resizing

What is the best way to create non-standard text wrapping in HTML and CSS that is both semantic and sleek, avoiding square or circular shapes?

Is there a way to achieve text wrapping like this using semantic and clean HTML and CSS that is compatible with all browsers? The only solution I can think of is adding different classes to the <p> element. However, the drawback of this approach is ...

jquerycssxhtml

Utilizing a Recycled jQuery UI Themeroller Overlay

I'm looking to optimize css-loading bandwidth by reusing the overlay from jQuery UI for a specific section of my page. However, I'm encountering an issue where the overlay only covers a semi-transparent blackout of the entire page instead of just ...

jquerycssjquery-ui

Concentrate on user input in PHP programming

My goal is to create a PHP validation form where errors are displayed correctly every time. However, I am encountering an issue with setting focus on the input field with an error if one occurs. I have variables like $rut_error, $first_name_error, $last_na ...

phphtmlfocus

When trying to use ngModel with Angular, an error occurs where the property 'selected' cannot be created on a string

I'm currently attempting to utilize [(ngModel)] in the following manner: <div class="items"> <tbody> <tr *ngFor="let info of this.information"> <td> <input type="checkbox" [(ngModel)]="this.info.n ...

htmlangularangular-ngmodel