How to position ul at the bottom of a fixed div

I have a fixed sidebar with two ul elements. I attempted to position the blue ul at the bottom of the fixed div, but it is not aligning as intended.

<div class="sidebar">
<ul style="background:green;">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<ul class="align-bottom" style="background:blue;">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="main">
MAIN CONTENT
</div>

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  overflow-x: hidden;
  background: grey;
  width: 150px;
}

.main {
  position: absolute;
  top:0;
  left: 150px;
  z-index: 1;
}

.align-bottom {
  position: relative;
  bottom:0;
  width: 100%;
}

https://jsfiddle.net/fj0b6jx3/6/#&togetherjs=2v1pIMRuTT

Can anyone help me figure out what mistake I made in my code?

Appreciate any assistance in advance.

csshtmlpositionalignment

Answer №1

Modify the position of .align-bottom from relative to absolute

.align-bottom {
  position:absolute;
  bottom:0;
  left:0;
  width:150px
}

Visit this link for reference

Answer №2

UPDATE: I just noticed that your original solution was missing the position: absolute; property ... however, if my comments were still helpful to you - then I'm glad I could assist :)

Unordered lists (ul) have margins applied to them, so all you need to do is...

  .align-bottom {
    position: absolute;
    bottom:0;
    left:0;
    width:150px;
    margin: 0; // make sure to add this line
  }

Answer №3

Inquiry You appear to be seeking a way to position a child element at the bottom of its parent element.

Solution To achieve this, set the child element's CSS to have a position of Absolute.

My explanation:
When you give an element a relative position, you are essentially shifting it from its original default position before any styling was applied.

Essentially, you were asking if the element could move to the bottom of itself (which it can't).

However, by specifying absolute positioning, you are utilizing the parent element, allowing the child element to be positioned at the bottom of the parent element.

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

What's the best way to make sure an image and text are perfectly aligned on the

How can I align an image and text on the same line, as currently the a tag is higher than my text? Here is the HTML code: <div class="author-name"> <img class="article-author-img" src="{{ preload(asset('assets/st ...

htmlcss

The logo in the Bootstrap 4 beta navbar-brand does not dynamically resize when the navbar collapses, even with the img

Bootstrap 4 Beta Usage Incorporating a logo and inline menu links in the responsive navbar of my website has been a challenge. While the navbar collapses appropriately with viewport changes, the logo fails to shrink proportionately. This results in the ha ...

csstwitter-bootstrapbootstrap-4

Adjust the background color using jQuery to its original hue

While working on a webpage, I am implementing a menu that changes its background color upon being clicked using jQuery. Currently, my focus is on refining the functionality of the menu itself. However, I've encountered an issue - once I click on a men ...

javascriptjqueryhtmlcssasp.net

Using the onMessage event in React Native WebView does not seem to have any functionality

I'm having trouble with the onMessage listener in React Native's WebView. The website is sending a postMessage (window.postMessage("Post message from web");) but for some reason, the onMessage listener is not working properly. I can't figure ...

javascripthtmlreact-nativewebview

Sorting of tables does not function properly following an ajax request

I built a table that utilizes an AJAX response triggered by selecting a date from a drop-down menu. <!--datepicker--> <div class="col-md-4"> <input type="text" name="date_po_month_picker" id="date_po_month_picker" class ...

jqueryajaxhtml

How to extract a value from a span input textbox using Vue?

I just started using Vue and I'm attempting to create an auto-growing input. I've realized that it's not possible to create a real <input> element that adjusts its size based on its content and allows for value modifications using v-mo ...

javascripthtmlvue.jsinput

Using Razor view form with various submit buttons

In my razor view, I have a BeginForm command surrounded by a loop that generates an HTML table with a submit button in each row. My concern is how do I identify which specific row the submitted form corresponds to when sending it back to the controller? T ...

htmlasp.net-mvcasp.net-mvc-3razor

Encountering difficulties triggering the click event in a JavaScript file

Here is the example of HTML code: <input type="button" id="abc" name="TechSupport_PartsOrder" value="Open Editor" /> This is the jQuery Code: $('#abc').click(function () { alert('x'); }); But when I move this jQuery code to a ...

javascriptjqueryhtml

Achieving a dynamic "Picture Presentation" feature with JavaScript/jQuery

Currently, I am in the process of developing a website that will serve as a presentation. My plan is to create a slideshow effect using JavaScript. While I have implemented some functions, I must admit that it is not very organized at the moment. The main ...

javascriptjqueryhtmlcss

Retrieving Data from Outside Source using AngularJS

Is there a way to retrieve JSON-Text-Stream data from a specific URL (e.g. SOMEURL/ean.php?id=4001513007704)? The returned result typically appears as follows: { "product": { "ean_id": "4001513007704", "title": "Gerolsteiner Mineralw ...

javascripthtmlangularjscordovaionic-framework

The animation on my jQuery script seems to be malfunctioning

I'm encountering an issue with a div element that is partially off the screen and should move out when a button is clicked. I've shared my script here, but it seems to not work as intended when the button is pressed. The visualization in jsfiddle ...

jqueryfacebookhtml

Applying CSS to replicate the vintage iPhone app icon design

I've been searching online for days, but I can't seem to find any helpful resources on how to use CSS3 to style the old iPhone app icon. My goal is to apply a CSS3 style to this curved line, with a fallback option in case older browsers don&apos ...

htmlcsscss-shapes

What is the technique for rearranging columns to be at the top in Foundation for mobile devices?

On my desktop, I have a layout like this: [Column1 large-8] [Column2 large-4] For mobile view, I'd like it to be like this: [Column2 large-4] [Column1 large-8] Below is the code snippet I am working with: <div id="search-content" class="row ma ...

htmlcsszurb-foundation

My Javascript file is not being recognized by MVC

Initially, I created an MVC application without fully understanding that MVC is more backend-oriented than frontend-focused. I ended up building a simple website with just HTML, CSS, and Javascript files, which worked perfectly. However, when I tried to in ...

javascriptjqueryhtmlcssasp.net-mvc

Obtaining the width of a child table using Jquery

I have a question that might seem simple, but I can't figure it out. How can I use jQuery to get the width of a table that is a child of a div with the class "test"? <div class="test"> <div id="one"> </div> <table> <thead&g ...

jqueryhtml

Enhancing the appearance of list options in Autocomplete Material UI by utilizing the renderOption feature

I'm putting in a lot of effort to customize the option elements in the autocomplete list. My plan is to achieve this using the renderOptions prop, where I can create DOM elements and easily apply styles with sx or styled components. However, somethin ...

javascriptcssreactjsmaterial-uiautocomplete

The Bootstrap 3 Navbar displays a #EEEEEE color when a link is hovered over

I have not specified a hover color in the stylesheet for links to be #EEEEEE. I want the navbar hover effect to blend in with the navbar background, creating a seamless transition when hovered over. For reference, here is my current stylesheet code: Paste ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for deleting all content within a designated html tag (including the tag itself)

Imagine you are dealing with a string like this: text = """<p>Bla bla bla.</p><p>Blo blo blo<a href="http://www.example.com">bli bli</a>.</p><p>blu blu<br> <span style="font-size: x-small;"><br> ...

pythonhtmltags

adjustable text size in web view interface

When loading the following html string in a uiwebview, I am trying to set the font-size as a variable value: NSString * htmlString = [NSString stringWithFormat:@"\ <html>\ <s ...

htmlcssuiwebviewxcode4.3

How can I align the content within two div elements?

I'm facing a bit of a challenge that I can't seem to figure out. Within a div, I have one photo and inside another div, there is also a photo. I was able to resize both images from the parent and child divs successfully. <div style="width:100 ...

htmlcss-positionimage-resizing