Shift the image down to the bottom of the sidebar

This is the code for my sidebar HTML, with the side navigation bar positioned on the left:

    #main-container {
        display: table;
        width: 100%;
        height: 100%;
    }
     
    #sidebar {
        display: table-cell;
        width: 15%;
        vertical-align: top;
        background-color: #ffffff;
        box-shadow: 1px 0px 3px grey;
    }
     
    #sidebar a {
        text-decoration: none;
      display: block;
      padding: 20px 0 20px 30px;
      color: #000000;
      letter-spacing: 1px;
    }
     
    #sidebar a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: black !important;
    }
     
    #sidebar a:hover, #sidebar a.active {
      text-decoration: none;
      background: #f5f5f5;
      color: black;
    }
    
    #sidebar a.active {
        background: #f5f5f5;
    }
<div id="main-container">
     
        <div id="sidebar">
            <a href="n">+ Add Sale</a>
            <a class="active" href="#">Home</a>
            <a href="s">My Sales</a>
            <a href="a">Account</a>
            <a href="l">Log Out</a>
            
            <br>
            <center>
            <img width="80%" height="10%" src="img/t-vector-logo.png"/>
            </center>
           
        </div>

I'm looking to relocate the image to the bottom of the sidebar. I've tried various methods but nothing seems to work. Any suggestions?

htmlcss

Answer №1

<div id="sidebar">

    <a href="n">+ Add for Sale</a>
    <a class="active" href="#">Home</a>
    <a href="s">My Sales</a>
    <a href="a">Account</a>
    <a href="l">Logout</a>
    
    <center>
        <img width="80%" height="10%" src="img/t-vector-logo.png" />
    </center>

</div>

Answer №2

Simply relocate the HTML code:

#main-container {
        display: table;
        width: 100%;
        height: 100%;
    }
     
    #sidebar {
        display: table-cell;
        width: 15%;
        vertical-align: top;
        background-color: #ffffff;
        box-shadow: 1px 0px 3px grey;
    }
     
    #sidebar a {
        text-decoration: none;
      display: block;
      padding: 20px 0 20px 30px;
      color: #000000;
      letter-spacing: 1px;
    }
     
    #sidebar a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: black !important;
    }
     
    #sidebar a:hover, #sidebar a.active {
      text-decoration: none;
      background: #f5f5f5;
      color: black;
    }
    
    #sidebar a.active {
        background: #f5f5f5;
    }
<div id="main-container">
     
        <div id="sidebar">
            
            
        <a href="n">+ Add Sale</a>
        <a class="active" href="#">Home</a>
        <a href="s">My Sales</a>
        <a href="a">Account</a>
        <a href="l">Logout</a>
        
        
            <center>
            <img width="80%" height="10%" src="img/t-vector-logo.png"/>
        </center>
        
        </div>

Answer №3

Modify the image code within the sidebar code. That should be sufficient. or utilize the order property in CSS

#main-container {
    display: table;
    width: 100%;
    height: 100%;
}
 
#sidebar {
    display: table-cell;
    width: 15%;
    vertical-align: top;
    background-color: #ffffff;
    box-shadow: 1px 0px 3px grey;
}
 
#sidebar a {
    text-decoration: none;
  display: block;
  padding: 20px 0 20px 30px;
  color: #000000;
  letter-spacing: 1px;
}
 
#sidebar a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: black !important;
}
 
#sidebar a:hover, #sidebar a.active {
  text-decoration: none;
  background: #f5f5f5;
  color: black;
}

#sidebar a.active {
    background: #f5f5f5;
}
<div id="main-container">
 
    <div id="sidebar">
      <a href="n">+ Add Sale</a>
      <a class="active" href="#">Home</a>
      <a href="s">My Sales</a>
      <a href="a">Account</a>
      <a href="l">Logout</a>
      <br>
      <center>
        <img width="80%" height="10%" src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"/>
      </center>
      <br>
    </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

What is the best way to set the width of an iframe within a <td> element to be 33% of the screen?

I am facing an issue with scaling an iframe dynamically inside a <td> element. My goal is to make the iframe occupy 33% of the screen width while automatically adjusting its height. Here is what I have tried: <iframe src="google drive presentati ...

htmlcssiframe

Determine whether there is greater available space above or below a specific element within the DOM

I'm looking to create a dynamic layout where an input field is accompanied by a list in a div, positioned either above or below depending on available space. This setup needs to account for the fact that the input field could be located anywhere on th ...

htmlcssangularjstypescript

Adjust the parent container to match the height of the child container when it is being hovered

I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case. Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the righ ...

htmlcss

Is it possible to utilize the addition assignment operator (`+=`) to modify the `transform:rotate('x'deg);` CSS property using

This is the code I have been working on: #move{ height:70px; width:70px; border:2px solid black; border-radius:15px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="button" val ...

javascriptjquerycsstransform

Finding attributes with spaces in their values using XPath

Is there a way to select an attribute with spaces in xpath? I am currently trying to select a checkbox attribute named "checked type". I have experimented with //[@checked type], //[@checked-type], //[@checked_type], and //[@checked\stype], but none ...

pythonhtmlseleniumxpath

The background-color of a single child within an absolutely positioned element in Chrome may not be displayed if the element has a z-index and overflow scrolling

This test page has been created to showcase the issue: <html> <head> <style> .panel { position: absolute; width: 326px; max-height: 200px; overflow: scroll; z-index: 1000; } .item-container { width: 100%; list-style: none; ...

htmlcssgoogle-chrome

styling multiple elements using javascript

Recently, I created a jQuery library for managing spacing (margin and padding). Now, I am looking to convert this library to pure JavaScript with your assistance :) Below is the JavaScript code snippet: // Useful Variables let dataAttr = "[data-m], [d ...

javascriptjqueryhtmlcssvisual-studio-code

Are there any PHP functions available that can check if the query string is empty?

I have experience with server-side development but not much in PHP. Currently, I'm working on a semi-basic tool with 10-15 pages and using the $_GET parameter for navigation. Is there a PHP function that can check if the query string is empty to dete ...

phphtml

Is there a way for me to retrieve the name of a newly opened browser tab from the original tab?

I have written a code snippet to create a new tab within the same browser by clicking on a link. function newTab() { var form1 = document.createElement("form"); form1.id = "newTab1" form1.method = "GET"; form1.action = "domainname"; //My ...

javascriptjqueryhtml

Next.js is refusing to render an array of HTML elements

Consider this scenario where I have a block of code in TypeScript that attempts to create and display a list of elements. Here is a sample implementation: const MenuList = ():ReactElement => { const router = useRouter(), liElements:any = []; con ...

javascripthtmlcsstypescriptnext.js

The animation in CSS seems to be malfunctioning, but strangely enough, the exact same code works elsewhere

Recently, I encountered a strange issue with my project. An animation effect that was working perfectly fine suddenly stopped working when I opened the project. To troubleshoot, I downloaded the same project from my GitHub repository and found that the ani ...

cssanimation

The Input Boxes Are Too Broad

Currently, I am working on a responsive web page that features a form. However, I have noticed that all the input elements are spilling out of the form both from the left and right sides. Can someone please shed some light on why this could be happening? ...

htmlcssbootstrap-4

I'm seeking answers on selenium and the proper use of CSS selectors, as well as troubleshooting the error message 'selenium.common.exceptions.ElementClickInterceptedException'

After some research, I think I have a grasp on CSS selectors and their appearance. However, when using selenium, how can I locate a CSS selector on a website and then click on it? The correct syntax eludes me. I encountered this error as well: selenium.co ...

pythonhtmlcsspython-3.xselenium

Browsing the website through http://localhost instead of file:// while utilizing node.js

I am currently in the process of familiarizing myself with node.js. Everything appears to be running smoothly when I access the site from file:///C:/.../myfolder/index.html. The jquery and bootstrap files are located in the directories myfolder/css/ and m ...

htmlnode.jsserver

Ways to efficiently update styles dynamically using css and/or javascript

I am trying to update the styles of a button when it is clicked. I initially set the style for the first element on page load, but now I need to remove those styles from the first element and apply them to the clicked button instead. I am having trouble fi ...

javascripthtmlcssknockout.js

It is not possible to simultaneously utilize the properties `display: inline-block` and `width: 100%`

As someone with limited CSS knowledge, I have encountered a challenge. My goal is to ensure that my website's body has a width of 100%, while also preventing the content from wrapping when the browser window is resized. To achieve this, I attempted a ...

htmlcssstyleswidthinline

Can we stop a specific container from resizing on mobile devices?

My goal is to have the entire page scale down, except for the navigation container. I'm adjusting some CSS rules to improve accessibility on smartphones, but the issue arises with the multiple images it uses. I need these images to display in their or ...

cssmobile

Enhance class names by utilizing addEventListener within the useEffect hook

I'm having trouble with creating a hamburger button menu. The issue I'm facing is that when I click the button, nothing happens. Even though I can log something in the toogleHamburger function and see it in the console, the styling does not chang ...

cssreactjssass

Searching for li elements that contain text values - a guide

I have a list of letters and I want to filter out any values that contain the text entered by the user in a textbox. Here is the design: Search List: <input type="text" id="txtSearch" /> <ul> <li>Coffee1</li> <li>Coffe ...

javascriptjquerycss

Include a name in the set_values function using Rvest

I'm currently working on scraping data from this website. I have a code written in rvest for login, but each time the page refreshes, the form name changes. library(rvest) loginpage <- "https://demo.glpi-project.org/" pagesession <- html_sess ...

htmlrweb-scrapingrvest