Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C#ASP.NETCSSHTML
hey guys ....
i have a problem in my designing ...
i have three div as below:
<div class="Header">
 
   ...
 
</div>
<div class="Body">
 
   ...
 
</div>
<div class="Footer">
 
   ...
 
</div>
i set height for every div 'auto' becaus i want their height set by their content ...
well my header div and my body div work as well but my footer div stick on top , it think it is a header :S i have a solution to splve that set height property for header div and body div as digit like '500px' ... but its not good maybe my content need more than 500 height ... so what should i do for keep footer bottom of body div if body get taller my footer go downer :s
 
check my codes:
<body  önload='PageLoad()'>
    <div class="HeaderContainer">
        <div class="SiteLogo">
            <asp:Image ID="imgSiteLogo" runat="server" ImageUrl="~/Images/logo.png"/>
        </div>
        <div class="HeaderContent" dir="rtl">
            <div class="TopAd">
                <center>ADVERTISE PLACE</center>
            </div>
            <div class="SiteDiscription">
                <span>سایت چت فارسی  گپر</span>
            </div>
        </div>
    </div>
    <div class="BodyContainer">
        <div id="VerticalMenuLeft" class="MenuBar" dir="rtl" style="height:auto;">
            <div class="LeftMenubarItem"><a id="OrderSoftware" href="" title="سفارش هر نوع نرم افزار با قیمت مناسب و کیفیت بالا" target="_blank">سفارش نرم افزار</a></div><br />
            <div class="LeftMenubarItem"><a id="OrderWebsite" href="" title="سفارش وب سایت با سرعت بالا، پشتیبانی، طراحی زیبا، کیفیت بالا و قیمت مناسب" target="_blank">سفارش وب سایت</a></div><br />
        </div>
        <div id="BodyMainContent" class="BodyMainContent">
            <asp:ContentPlaceHolder ID="MainContents" runat="server"></asp:ContentPlaceHolder>              
        </div>
    </div>
    <div class="FooterContainer">
        <div style="background-color:Olive;float:left;width:200px;height:200px;">        
        </div>
        <div style="background-color: Lime;float:right;width:80%;height:200px;">           
        </div>
    </div>
</body>
 
and this is my css:
/******************** Tags ********************/
body 
{
    width:100%;
    height:auto;
    background-color:Yellow;
    margin: 0px;
}
/******************** Header ********************/
.HeaderContainer
{
    width:100%;
    height:auto;
}
 
.SiteLogo
{
    width:13%;
    height:200px;
    float:left;    
}
 
.HeaderContent
{
    width:85%;
    height:200px;
    background-color:Red;
    float:right; 
}
 
.TopAd
{
    width:100%;
    height:70px;
    background-color:White;
}
 
.SiteDiscription
{
    font-family:2  Compset;
    text-align:center;
}
/******************** Body ********************/
.BodyContainer
{
    width:100%;
    height:auto;
}
 
.MenuBar
{
    width:13%;
    background-color:green;
    float:left;
}
 
.MenuBar .LeftMenubarItem
{
    width: 100%;
    height: 50px;
    background-image: url('../Images/LeftMenu/Item1.png');
    background-position: center center;
    background-repeat:no-repeat;
    color:White;
    text-align:center;
    text-decoration:none;
    vertical-align:text-bottom;
    padding-top:10%;
}
 
.BodyMainContent
{
    width:85%;
    height:500;
    background-color:Blue;
    float:right;
}
/******************** Footer ********************/
.FooterContainer
{
    width:100%;
    height:auto;
    background-color:Gray;   
}
Posted 21-Sep-12 23:38pm
Edited 22-Sep-12 0:42am
v3
Comments
Zoltán Zörgő at 22-Sep-12 6:20am
   
And what is your CSS code? Without it how we could find your error? Well we could make our own classes - believe me, we could, but where is your effort than?
source.compiler at 22-Sep-12 6:36am
   
i said you everything ... i just set width:100% and i dnt know should set height to what for achieve my purpose ... and i just have width and height in my css file for every 3 div ... now i need to know what should i add in my css file to achieve my purpose (why my footer div wana be upper than body and header , it will go top of all however my div footer is after 2 other div)
Zoltán Zörgő at 22-Sep-12 6:38am
   
No, you did not. You wrote what you want, but not what you did. So, we need to see what you already have, so we can fix it - if you want our help. Post your CSS code for these three classes and their container also.
source.compiler at 22-Sep-12 6:43am
   
no check it out my friend ... so thanks
Zoltán Zörgő at 22-Sep-12 8:07am
   
You see, you have posted what's needed, and you got your answer. That's all.

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Try adding a clear attribute after the body. i.e.
  <div id="body">
     content and stuff here.....
     <div style="clear:both">
     </div>
  </div>
<div id="footer">footer stuff</div>
  Permalink  
Comments
source.compiler at 22-Sep-12 7:03am
   
yes ... its working , thanks dude ... should review css again :s
compninja25 at 22-Sep-12 7:09am
   
no problem! Glad it's working now :P

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Your Filters
Interested
Ignored
     
0 Sergey Alexandrovich Kryukov 432
1 sanket saxena 355
2 Abhinav S 258
3 OriginalGriff 235
4 CPallini 205
0 Sergey Alexandrovich Kryukov 8,704
1 OriginalGriff 5,000
2 Peter Leow 3,839
3 Maciej Los 3,535
4 Er. Puneet Goel 3,107


Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 22 Sep 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid