What is the best way to insert a space within a stationary element?

I'm facing an issue with two fixed elements positioned at the bottom of my webpage:

#wrapper {
  position: fixed;
  background: gray;
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 12px 12px 0 0;
  width: 100%;
}

#bottom-element {
  height: 30px;
  position: fixed;
  background: black;
  display: block;
  bottom: 0;
  z-index: 2;
  width: 100%;
  left: 0;
  right: 0;
}

#title {
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid white;
}

#notifications {
  display: flex;
  flex-direction: column;
      overflow: scroll;
    overflow-x: hidden;
}

.entry {
  padding: 15px;
  background: cadetblue;
}
<div id="wrapper">
  <div id="title">Notifications</div>
  <div id="notifications">
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
  </div>
</div>
<div id="bottom-element"></div>

The challenge I'm encountering is that the last entry is getting hidden under bottom-element. I've already attempted to add these styles to the notifications element:

  • padding-bottom: 30px
  • margin-bottom: 30px

I also tried using a pseudo-element: 

#notifications::after {
    content: '';
    width: 100%;
    height: 30px;
    display: block;
}

Despite trying these fixes, nothing seems to work. How can I address this issue?

htmlcss

Answer №1

If you're looking to make sure your notifications display properly, there are a few steps you can take to achieve this efficiently.

The issue you encountered: The problem arose because your bottom bar was placed outside of the wrapper and wasn't confined by its dimensions. Additionally, the wrapper itself didn't have a height restriction set to 100%, causing the notifications section to expand beyond what was visible on the screen. As a result, on smaller screens, fewer notifications were shown due to overlapping with the fixed bottom bar.

How to resolve the problem: - Rearrange the bottom bar within the wrapper - Set the wrapper to flex in a column direction - Ensure the wrapper has a height of 100%

By making these adjustments, your notifications will now be scrollable and easily viewable, regardless of how many notifications you have.

Explanation of why this solution works: With the wrapper now set at 100% height, it stays within the viewport and won't extend below the screen. The use of flex allows the elements inside (title, notifications, and bottom element) to adjust themselves accordingly for better alignment. Additionally, the overflow scroll property on notifications ensures that any excess notifications are hidden but accessible via scrolling.

Here's the updated code snippet incorporating the fix:

#wrapper {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: gray;
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 12px 12px 0 0;
  width: 100%;
  height: 100%;
}

#bottom-element {
  height: 30px;
  position: fixed;
  background: black;
  display: block;
  bottom: 0;
  z-index: 2;
  width: 100%;
  left: 0;
  right: 0;
}

#title {
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid white;
}

#notifications {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
}

.entry {
  padding: 15px;
  background: cadetblue;
}
<div id="wrapper">
  <div id="title">Notifications</div>
  <div id="notifications">
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
  </div>
  <div id="bottom-element"></div>
</div>

Answer №2

To start, include a non-breaking space in your text. Next, add varying widths of white space. Then, replicate a tab using non-breaking spaces. Finally, utilize CSS to indent paragraphs.

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

Proper Method for Constructing Forms

While developing a signup form, I've noticed that I often turn to using tables for proper alignment, similar to the approach used on the MySpace signup page where colspan is utilized to evenly space out elements. Is this method going against conventio ...

htmlcssformscss-tables

Transitioning from left to right, picture smoothly scrolls into view using Way

I've explored various websites and even attempted to decipher a waypoint guide, but unfortunately, I haven't had any success. The scroll function doesn't seem to be working with the code below. (source: ) Any assistance on this matter would ...

javascriptjquerycss

Can the Browser width/document width be maintained when shrinking the browser window size?

https://i.stack.imgur.com/a4gfA.pngLooking for a solution to maintain the browser/document width at 350px, preventing users from minimizing the window. The desired width is actually 400px, not 350px. Please refer to the image above. I require the window ...

javascriptjqueryhtmlcsstwitter-bootstrap

Assistance needed for aligning a div to the right using

Check out my website at www.whiterootmedia.com. I am trying to prevent my ads on the right from wrapping and disappearing off the screen when the width is around 800px. I believe I need to create a wrap div container, float my ads div to the right, set a ...

htmlcss

Webpage featuring tabs aligned horizontally

Can anyone guide me on setting up horizontal tabs similar to the design in this image: https://i.sstatic.net/ewXO4.png? Below is the code snippet: <label class="formlabel">Title 1:</label> <div id="radio_form"> <label><inpu ...

javascriptjqueryhtmlcss

Double Row Navbar Struggles in Bootstrap 4

I have been experimenting with creating two bootstrap navbars. The first one features the website's domain name in the center, accompanied by a dropdown menu to navigate to other sections. Each of these sections has its own subbar containing specific ...

htmlcssbootstrap-4navbar

Incorporate dynamic classes into an HTML list using PHP

I'm struggling to assign consecutive classes to each list item in a list with the 'nav' class. My goal is to give each list item a class of 'nthChild-x', where x corresponds to its position in the list. I'm pretty new to PHP, ...

phphtmldomhtml-lists

On smaller screens in portrait mode, CSS automatically incorporates margin adjustments

Here is the code I am working with: <html> <head> <style> body { margin: auto; width: 720px; } </style> </head> <body> <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ip ...

htmlcss

magnetic container: stationary container nested within absolutely positioned container

I recently created a page that can be viewed here: [LINK] This page is set up to scroll horizontally, resulting in a row of divs with black borders. However, I am facing an issue with the smaller divs inside (red ones). I want them to stay within the par ...

javascriptjqueryhtmlscrollposition

Is it acceptable to utilize typographical quotation marks within the meta tag of HTML code?

After stumbling upon a website, I noticed that one meta tag stood out: <meta name="”robots”" content="”noindex,nofollow”"> It's worth noting that the attribute values are enclosed in unusual typographical quotation m ...

htmlnoindex

Enhancing Nativescript elements with pseudo selectors

Is there a way to apply the button:hover effect in Nativescript Buttons? I attempted the following code: Button:highlighted{ background-color: red; } Button:hover{ background-color: red; } Button:touch{ background-color: red; } ...

javascriptcsssassnativescript

Proper application of article, aside, and header elements

Can someone help me with my page template setup? I have a sidebar on the left and main content area on the right. I'm wondering if I am using the article, aside, and header tags correctly. Also, should I attach classes/ids to html5 elements or is that ...

csshtml

Integrate JavaScript code with HTML pages

After creating a basic HTML structure that I am proud of, I encountered some challenges with getting the Javascript to function properly. I am new to working with Javascript and received some initial assistance, but unfortunately, it is no longer working. ...

javascriptjqueryhtmljsonajax

What is the most efficient method for tallying the occurrences of the character "." in a webpage?

I am looking to analyze the content of an html page and tally up the occurrences of "." (period). Below is a snippet of code that accomplishes this task by reading the html and displaying the desired results. While considering modifying the existing code, ...

javahtml

AngularJS - enable user authentication to access exclusive content on the webpage without redirecting to a new page

I'm struggling with implementing a login form on my AngularJS site... My goal is to dynamically load a login form onto any page of the site without needing to navigate away, then asynchronously handle user login information and display a success or f ...

javascriptjqueryhtmlcssangularjs

Adjust the jQuery resizable handlers on the fly

I am encountering an issue when attempting to change the handler on a resizable element. Initially, I used : $(line) .draggable({containment:"parent"}) .resizable({ containment:"parent", handles: "e, w" }); N ...

javascriptjquerycsshandlerresizable

Adjusting the size of all elements on a webpage

Upon completing my project, I noticed that my localhost:3000 is zoomed in at 125%, causing it to appear less than ideal at 100% zoom. Is there a way to adjust the zoom/scale of my website to match how it appeared on my localhost environment? I came across ...

javascriptcssreactjszooming

CSS: Child Div Fails to Override Parent Div

My current page's content header appears as follows: However, I am aiming for something like this instead: This is the HTML snippet related to that part of the page: <div class="header">My Tools<a href="#possess" class="anchor_link">Vie ...

csshtml

Interacting with HTML elements via Java programming

I am looking for a way to interact with HTML elements in my Java program by using the id or className of the elements (similar to getElementByID or getElementsByClassName). Additionally, I need the ability to click buttons on the page. Key Points: I am d ...

javahtml

Is there a way to create space at the bottom after setting margin to auto?

I'm currently mastering Bootstrap v5.0 and experimenting with creating a webpage using Bootstrap. I've encountered an issue that requires assistance. Specifically, I'm trying to add extra space between two columns on smaller screens while ma ...

javascripthtmlcsstwitter-bootstrapbootstrap-5