CODEWITHSUNDEEP
css
egaoneko
egaoneko

Reputation: 389

How to stick to bottom on layout by using CSS?

I made my site layout, like under plunker.

plunker

.bottom_block {
  position: absolute;
  width: 100%;
  display: block;
  bottom: 0;
}

It's left sidebar has bottom block like above code, but it doesn't work. It doesn't stick to bottom. How can I stick to bottom?

Upvotes: 0

Views: 79

Answers (2)

Radames E. Hernandez
Radames E. Hernandez

Reputation: 4425

You can use position fixed and left, right to simulate the 100% width like this:

CSS:

.container_fixed{
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
}

.bottom_block {
  width: 50%;
  height: 100px;
  margin: 0 auto;
}

HTML:

<div class="container_fixed">
    <div class="bottom_block"></div>
</div>

here the example: https://fiddle.jshell.net/1nmemzew/

I hope this will be helpful

Regards

Upvotes: 0

Majid
Majid

Reputation: 2900

Find this line 

  <div class="bottom_block left-sidebar-down">

then change it to 

  <div class="bottom_block">

and go to your style.css and find bottom_block class and change it to 

.bottom_block {
  position: fixed;
  bottom: 0;
  height: 600px;
  width: 300px;
  background-color: #996666;
}

that should work for you.

Upvotes: 1

Related Questions