CODEWITHSUNDEEP
htmlcss
Erik Auranaune
Erik Auranaune

Reputation: 1414

Move image to bottom of sidebar

This is my sidebar HTML code, and the side navigation bar is on the left side:

    #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">
            <br>
            <center>
            <img width="80%" height="10%" src="img/t-vector-logo.png"/>
        </center><br>
            
        <a href="n">+ Legg til salg</a>
        <a class="active" href="#">Hjem</a>
        <a href="s">Mine salg</a>
        <a href="a">Konto</a>
        <a href="l">Logg ut</a>
        
        
        
        </div>

How can I move that img to the bottom of the sidebar. I have been searching but haven't found anything that works. Any tips?

Upvotes: 1

Views: 160

Answers (3)

Rayees AC
Rayees AC

Reputation: 4659

Change image code below of sidebar code.. That's enough. or use 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">+ Legg til salg</a>
      <a class="active" href="#">Hjem</a>
      <a href="s">Mine salg</a>
      <a href="a">Konto</a>
      <a href="l">Logg ut</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>

Upvotes: 0

DCR
DCR

Reputation: 15685

just move the relevant html:

#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">+ Legg til salg</a>
        <a class="active" href="#">Hjem</a>
        <a href="s">Mine salg</a>
        <a href="a">Konto</a>
        <a href="l">Logg ut</a>
        
        
            <center>
            <img width="80%" height="10%" src="img/t-vector-logo.png"/>
        </center>
        
        </div>

Upvotes: 1

Dan Mullin
Dan Mullin

Reputation: 4435

<div id="sidebar">

    <a href="n">+ Legg til salg</a>
    <a class="active" href="#">Hjem</a>
    <a href="s">Mine salg</a>
    <a href="a">Konto</a>
    <a href="l">Logg ut</a>
    
    <center>
        <img width="80%" height="10%" src="img/t-vector-logo.png" />
    </center>

</div>

Upvotes: 1

Related Questions