headstrong div dnt want stay on its place

Question

0.00/5 (No votes)

See more:

hey guys ....
i have a problem in my designing ...
i have three div as below:

HTML

<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:

ASP.NET

<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:

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

ali_heidari_

Updated 22-Sep-12 0:42am

v3

Add a Solution

Comments

Zoltán Zörgő 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?

ali_heidari_ 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ő 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.

ali_heidari_ 22-Sep-12 6:43am

no check it out my friend ... so thanks

Zoltán Zörgő 22-Sep-12 8:07am

You see, you have posted what's needed, and you got your answer. That's all.

1 solution

Add a Solution

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

compninja25 · Accepted Answer · 2012-09-22T00:54:00

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>

Posted 22-Sep-12 0:54am

compninja25

Comments

ali_heidari_ 22-Sep-12 7:03am

yes ... its working , thanks dude ... should review css again :s

compninja25 22-Sep-12 7:09am

no problem! Glad it's working now :P

headstrong div dnt want stay on its place

1 solution

Solution 1

Add your solution here

Preview 0

headstrong div dnt want stay on its place

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us