HTML Forum

**numbenator** · 03-17-2005, 09:18 AM

Hi all,
Im using the below.
It's supposed to enable a left column with a content area that has a right column.

My problem is the footer.
I think it is in the flow of things however when I add more code to the left column, I am expecting the footer to drop in relation to the content that is entered. This is nt happenning and the flow seems to be lost consequently shunting the footer div to the right of the left colum.

Theres not much code and if someone could look at it it woul dbe really appreciated.

Cheers

Code:

<div>

   

  
  <div style="width:750px;">
   
      <div id="leftColumn" style="width:170px;background-
                                           color:red;float:left;">
	   
      <!-- left side here Want to add divs here but when you do, the footer
             doesnt move? Why? im sure i have a lfow only going on here -->
	  
	 </div>
	  
	  <!-- right side of page before footer -->
	  
              <div style="width:580px;float:right;">
	    <div style="background-color:red;float:left;"></div>
                 <div style="width:160px;background-
                                 color:red;float:right;">right</div>	    
                <p>middle</p>
              </div>
	  
      
  </div>

  <div id="bgfooter" class="footer">FOOTER HERE</div>
</div>

**grahamd** · 03-17-2005, 10:24 AM

To reposition a footer in relation to content you have to set the content above float properties, then assign the footer a clear property to position it beneath.

Example:

#body {
float: left;
margin-left: 40px;
padding: 0px;
}

#footer {
clear: left (or right, or all);
}

**numbenator** · 03-17-2005, 10:32 AM

this works fine in IE but as soon as I go to firefox, the footer slkips bacvk to the top again.

any more ideas?

**grahamd** · 03-17-2005, 10:38 AM

Can't help you mate - worked for me in Firefox! Gotta love temperamental browsers.

**numbenator** · 03-17-2005, 10:40 AM

ps. thanks for you time.

**drewrockshard** · 03-17-2005, 10:44 AM

did you try

HTML Code:

#footer {
display:block;
clear:both;
}

**numbenator** · 03-17-2005, 10:50 AM

perhaps you could explain the below then.....
Im clear : all however wish the footer to be dependant on the center div.
In fire fox, this simply isnt happenning.
The only way i can set right is if define clear:right but thats not what want lol

<div style="width:750px;">

<div style="width:170px; float:left;">
<p>left column</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

</div>
<div style="width:580px;float:right">

<div style="float:right;width:420px;background-color:red;">
<p>middle </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>  </p>
</div>

<div style="float:right;width:160px;background-color:blue;">
<p>middle </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>  </p>
</div>

</div>
</div>

</div>
<div style="width:750px; clear:all; height:20px; background-color:#006699;">footer here</div>