CSS question: div cover another div on AJAX

  • Thread starter Thread starter dunnil
  • Start date Start date
D

dunnil

Hi,
I have a simple question, how to prevent a div to be covered by another
div?!?
When I use AJAX the footer div of my page cover the rendered div, how
should I prevent it?
I used both: position:fixed; and the position:relative;
The first cover some text from the bottom of page and the other does
not work always.

Thanks in advance,
- H
 
Here is the CSS:
#footer {
width:100%;
background-color:#BFCFFF;
border-top:1px solid #d8efa6;
border-bottom:5px solid #C2C7DA;
padding-top:5px;
padding-bottom:5px;
position:relative;
bottom:0;
color:#000;
}

and the HTML:
<div id="header">
<h1>Results</h1>
</div>
<div id="content">
<center>
<%= ajax_bar_link('Result', 'result') %>
</center>
</div>
<br />
<div align="center" id="graph_div" style="display: none">
</div>
 
dunnil said:
Hi,
I have a simple question, how to prevent a div to be covered by
another div?!?
When I use AJAX the footer div of my page cover the rendered div, how
should I prevent it?
I used both: position:fixed; and the position:relative;
The first cover some text from the bottom of page and the other does
not work always.

Thanks in advance,
- H
Click to expand...

Well, I have been having lots of trouble/fun with this

The recommendation is:
Do not use position at all.

The new <div> will then postion under the others
 
That code snippet has no div using or displaying a footer
- only a header and content div are set to display anything

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Here is the CSS:
| #footer {
| width:100%;
| background-color:#BFCFFF;
| border-top:1px solid #d8efa6;
| border-bottom:5px solid #C2C7DA;
| padding-top:5px;
| padding-bottom:5px;
| position:relative;
| bottom:0;
| color:#000;
| }
|
| and the HTML:
| <div id="header">
| <h1>Results</h1>
| </div>
| <div id="content">
| <center>
| <%= ajax_bar_link('Result', 'result') %>
| </center>
| </div>
| <br />
| <div align="center" id="graph_div" style="display: none">
| </div>
|
 
footer div is the on the layout page (Something like MasterPage in
ASP.NET 2.0, I'm using Rails for this project)

<div id="footer">Copyright (c) 2006</div>
 
Back
Top