Codepen is a great platform for writing and testing code, but it seems like the top tag

body {
  background-color: black;
}

.inner{
  margin-left:400px;
  color:white;
  width:650px;
  height:450px;

  top:130px;
  position:fixed;
  padding-left:30px;
  padding-right:30px;
  text-align:center;
  background-color:grey;
}

.outer {
  height:500px;
  width:1000px;
  top:100px; 
   bottom:0px;
  margin-left:260px;
  position:fixed;

  background-color:white;
}
<div class="outer">
</div>
<div class="inner">
    <img />
    <h2>RK</h2>
    <h5>wtv@wtc</h5>
    <a>
      Github 
    </a>

    <p>blah blah blah </p>

    <br>

    <p> blah blah blah</p>
</div>

In the outer class, no matter how much I change the bottom property, it seems to have no effect on the final appearance of the webpage. I suspect this has something to do with block and inline elements, but I would appreciate any guidance in clarifying my understanding of these concepts. Any suggestions?

Answer №1

The issue lies in the fact that you cannot simultaneously use the top and bottom properties when employing position:fixed.

You have the option to adjust the element relative to either the bottom or top of the screen. If you eliminate the top:100px, the div will be positioned at the very bottom of the screen. Additionally, you can utilize the left property instead of the current margin-left property.

To explore more about the various positioning choices, visit here.

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

Having trouble adding flexslider before a div element with jQuery

Hey there! I recently got flexslider from woothemes.com. The page structure I'm working with looks something like this: <div class="parentdiv anotherdiv"> <div class="child-div1">some buttons here</div> <div class="child-div2"& ...

What is preventing HTML from triggering JavaScript when loaded inside a <div> with a script?

I'm working on creating a collapsible menu that I can easily customize on any page without the use of iframes. As someone new to web design, I have knowledge of CSS and HTML but I am currently learning JavaScript with limited experience in jQuery or A ...

Difficulty arises when attempting to pass a PHP variable as an argument within a MySQL query

My current task involves using a PHP variable as a search term in querying a MySQL database. First, I retrieve the variables from an HTML form: <?php //Set up variables $vals = array($_POST["id_number"], $_POST["id_name"], $_POST["id_submitname"]); $ke ...

Tips for refreshing HTML multiple file upload without reloading the page

I am currently working on a feature that involves counting the number of files uploaded. If more than 10 images are uploaded, I want to clear the input field while keeping everything else in the form intact. Everything was working fine until I encountered ...

How can you eliminate a line from the HTML input mask in Gravity Forms?

With Gravity Forms, I am utilizing the "input masks" feature to prompt users to enter data in a specific format. However, it seems to be creating an unwanted line within the input field itself as shown in the image below: https://i.stack.imgur.com/8gQ3K.j ...

Display intricate header and preview in a printed datatable

Hey there, I've been using the Datatable plugin and it's really great. However, I've come across a problem with complex headers like this: <thead> <tr><td>some text</td></tr> <tr><td>some te ...

`A brief disruption in loading the visual style of Google Maps`

Using the Ionic Framework, AngularJS, and Google Maps API, I encountered an irritating issue with my mobile app. Every time the map loads, there is a noticeable delay in loading the map style. This delay is particularly problematic as my map style converts ...

Enhancing Dynamic Dropdowns with the Latest JQuery Updates

I am facing an issue with my jQuery function that updates input boxes when a dropdown option is selected. I have also implemented an addRow function to dynamically add more selects, but the jQuery function does not work for the newly added selects. Below i ...

Extract the td elements from a table with specific class using the DataTable plugin

I stumbled upon this snippet of code while browsing through the DataTable website. var table = $('#example').DataTable(); table.column(0).data().each(function(value, index) { console.log('Data in index: ' + index + ' is: &apos ...

Adjust the background color in HTML emails for dark mode on mobile devices

How can I ensure that the HTML email maintains a normal white background even when mobile dark mode is turned on? I have included the following meta tag and media queries in my code: <meta name="color-scheme" content="light dark"> <meta name="supp ...

React Native ellipsizeMode - Using two Text elements side by side

I am trying to achieve a layout similar to the following scenarios: Case 1: If the text is longer than the screen width +--------------------------------------+ | very long teeeeeeeeeeeeeeeee.. (1234)| +--------------------------------------+ Case 2: If ...

Ways to turn off textarea resizing

Is there a way to prevent horizontal resizing on a textarea while still allowing vertical resizing? I find that the textarea often disrupts the design of my contact us page. If anyone has a solution for disabling the horizontal resize feature, please shar ...

Implementing file change detection using view model in Angular

When using the input type file to open a file and trigger a function on change, you can do it like this: <input type="file" multiple="multiple" class="fileUpload" onchange="angular.element(this).scope().fileOpened(this)" /> The functi ...

Step-by-step guide for making a CSS triangle design that is compatible across different browsers

Here's a common CSS code for creating a CSS triangle: display: inline-block; vertical-align: middle; content: " "; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 6px solid black; width: 0; height: 0; Click here ...

Is it possible to comment out classes within a specified class attribute? How can this be achieved?

Is there a way to temporarily omit specific classes within HTML (<div class="" ...>)? For instance: <div data-group="group1" data-container="true" class="container-lg d-flex /* slider */ p-0"> In this s ...

Eliminating the background color upon clicking

Here is the link structure I have set up: <ul> <li><a href="home.html"><span>home</span></a></li> </ul> However, when I click on the link, a shadow appears. I would like the link to appea ...

Looking for a solution to resolve the error in this SQL example?

I'm looking to extract node "-all_models=1-4.htm" in SQL using the example provided. Here is my current code: <div class="models_selector_block" > <DIV class="msb_item"> <a class="ser_active" hr ...

"Customize the appearance of ng-bootstrap datepicker selection with a unique

Having trouble with the ng-bootstrap datepicker when selecting style for month and year. https://i.sstatic.net/grlK6.png The issue seems to be with the select style. select[_ngcontent-c21] { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 .5re ...

The CSS styles are not being applied correctly in the HTML document

I have this snippet in my .css file: .attachment-label { font-size: 10px; font-style: italic; color: rgba(0,0,0,.5); } When I try to use it in my HTML like this: <div class="card-body"> <span class=" ...

Surprising 'T_ENCAPSED_AND_WHITESPACE' error caught me off guard

Error: An error was encountered while parsing the code: syntax error, unexpected character (T_ENCAPSED_AND_WHITESPACE), expected identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING) in C:\wamp\www\html\updatedtimel ...