CSS footer are going in place of right side - css

Question

I have a problem with my footer as I divided the page as follow:
<%# Page Title="" Language="C#" MasterPageFile="~/SVM.Master" AutoEventWireup="true" CodeBehind="Cateshow.aspx.cs" Inherits="beravoSV.Cateshow" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
.style8 {
color: #333333;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="midcont">
<div class="leftsidemainadsshow">
<br />
<asp:ListView ID="cateshowlistview" runat="server" DataSourceID="categoryshowsql" Style="text-align: left">
<ItemTemplate>
<div class="templist">
<asp:LinkButton ID="Adstitlinkbtn" runat="server"
Style="font-weight: 700; color: #0066FF" Text='<%# Eval("AdsTit") %>'
CssClass="adstit" OnClick="Adstitlinkbtn_Click"
PostBackUrl='<%# "AdsDetails.aspx?AdsTit=" + Eval("AdsID") %>'></asp:LinkButton>
<br />
<asp:ImageButton ID="ImageButton3" runat="server" Height="88px" Width="91px"
CssClass="imag1" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img1") %>'
PostBackUrl='<%# "AdsDetails.aspx?Img1=" + Eval("AdsID") %>' />
<br />
<asp:Label ID="AdsDescLabel" runat="server" Text='<%# Eval("AdsDesc") %>'
CssClass="adsdisc" />
<br />
<br />
<br />
<br />
<asp:Label ID="Sectlbl" runat="server" Text='<%# Eval("Section") %>'
Style="color: #333333"></asp:Label>
-
<asp:Label ID="categlbl" runat="server" Text='<%# Eval("Category") %>'
Style="color: #333333; font-weight: 700; font-style: italic;"></asp:Label>
<br />
<asp:Label ID="CountryLabel" runat="server" Text='<%# Eval("Country") %>'
Style="color: #333333" />
-
<asp:Label ID="StateLabel" runat="server" Text='<%# Eval("State") %>'
Style="color: #333333" />
-
<asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>'
Style="color: #333333" />
<div class="adsprice">
<span class="style8">Price:</span>
<asp:Label ID="AdsPriceLabel" runat="server" Style="color: #FF0000"
Text='<%# Eval("AdsPrice") %>' />
</div>
<div class="iconadsbox">
<asp:ImageButton ID="Likebtn" runat="server"
ImageUrl="~/iconsimg/favoritestar2.png" OnClick="Likebtn_Click" />
<asp:ImageButton ID="sendmailbtn" runat="server"
ImageUrl="~/iconsimg/mailposter.png" OnClick="sendmailbtn_Click" />
</div>
<asp:Image ID="Image1" runat="server" CssClass="divideline" />
<br />
</div>
</ItemTemplate>
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
<asp:DataPager ID="DataPager2" runat="server" PagedControlID="cateshowlistview" PageSize="7">
<Fields>
<asp:NumericPagerField />
<asp:NextPreviousPagerField />
</Fields>
</asp:DataPager>
</LayoutTemplate>
</asp:ListView>
</div>
<div class="primumads">
</div>
<br />
<br />
<asp:SqlDataSource ID="categoryshowsql" runat="server"
ConnectionString="<%$ ConnectionStrings:BeravaConnectionString %>"
SelectCommand="SELECT DISTINCT [AdsID],[Section], [Category], [Country], [State], [City], [AdsTit], SUBSTRING([AdsDesc],1,155) as AdsDesc, [AdsPrice], [Img1] FROM [ads] WHERE (([Category] = #Category) AND ([Country] = #Country))">
<SelectParameters>
<asp:QueryStringParameter Name="Category" QueryStringField="cat"
Type="String" />
<asp:SessionParameter Name="Country" SessionField="location" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</div>
<br />
</asp:Content>
When the rightside is empty the footer is going up and if it is full its will come down to the bottom. How I can make it always down even if the right side is empty?
You can find the below link to know more what is going up with me
enter link description here

Answer 1

You can add to te footer the following:
style="position: fixed; bottom: 0; width: 100% (This will fix the footer to the bottom of your screen)
If what is to fix the footer to the end of you page, you need to give to the header and to the content of your page a min height, here's an example:
<div id="header" style="min-height: 10%"></div>
<div id="content" style="min-height: 80%"></div>
<div id="footer" style="min-height: 10%"></div>
Note: you don't need to say that min-height: 10% in the footer, that's implicit.