I have 4 div on my page. I want to set those 4 div at bottom, so that those div stay at bottom even when there are scrollbar.

This is my HTML.

<div id="content">
1) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />

Long Dummy content.
</div>
<div class="footerdiv">Footer - scroll 1</div>
<div class="footerdiv">Footer - scroll2</div>
<div class="footerdiv">Footer - scroll 3</div>
<div class="footerdiv">Footer - scroll4</div>

And my Css

.footerdiv {
    position: fixed;
    bottom: 0;
    width: 100px;
}

It is setting my div at bottom, But all the bottom div are overlapping. I want to show them side by side by keeping all 4 div at bottom.

JsFiddle

I have 4 div on my page. I want to set those 4 div at bottom, so that those div stay at bottom even when there are scrollbar.

This is my HTML.

<div id="content">
1) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />

Long Dummy content.
</div>
<div class="footerdiv">Footer - scroll 1</div>
<div class="footerdiv">Footer - scroll2</div>
<div class="footerdiv">Footer - scroll 3</div>
<div class="footerdiv">Footer - scroll4</div>

And my Css

.footerdiv {
    position: fixed;
    bottom: 0;
    width: 100px;
}

It is setting my div at bottom, But all the bottom div are overlapping. I want to show them side by side by keeping all 4 div at bottom.

JsFiddle

• javascript
• jquery
• html
• css

5 Answers 5

Rather than positioning each element at the bottom, wrap the elements and set the parent element's position to fixed and position it at the bottom.

In doing so, the .footerdiv elements are still in the normal flow, and they can be positioned beside each other.

Updated Example

.footer-container {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
}
.footer-container .footerdiv {
  display: inline-block;
}

You had actually used 4 div's with same DIV id.

This is what you had to do-

<div class="footerdiv">
    <div>Footer - scroll 1</div>
    <div>Footer - scroll2</div>
    <div>Footer - scroll 3</div>
    <div>Footer - scroll4</div>
</div>

and set css to 100%, let it take up the horizontal space of the page-

.footerdiv {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Have a look at the working demo on JS fiddle.

Hope it helps :) Happy coding!

Set an id for each div and refer to each div that way.

<div class="footerdiv" id = "d1">Footer - scroll 1</div>
<div class="footerdiv" id = "d2">Footer - scroll2</div>
<div class="footerdiv" id = "d3">Footer - scroll 3</div>
<div class="footerdiv" id = "d4">Footer - scroll4</div>

Then you can say:

.footerdiv {
    position: fixed;
    bottom: 0;
}
#d1 {
    left: 100px;
}
#d2 {
    left: 200px;
}
#d3 {
    left: 300px;
}

How about a table? You can create a new column for each one of your elements.

<table class="footerdiv">
  <tr>
    <td>Footer - scroll 1</td>
    <td>Footer - scroll 2</td>
    <td>Footer - scroll 3</td>
    <td>Footer - scroll 4</td>
  </tr>
</table>

You can wrap them in footer like this. Here is fixed version: https://jsfiddle/4dq215h4/2/

and change css to this:

.footerdiv {
background: #0070FF;
line-height: 2;
text-align: center;
color: #042E64;
font-size: 20px;
font-family: sans-serif;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B;
display:inline-block;
float:left;
width:100px;
}
footer{
  position:fixed;
  bottom:10px;
}