...

View Full Version : Div not expaning outer Div.



esjjventura
06-04-2007, 01:02 PM
Please check out:
http://faxcom.mendyourfuelishways.com/overview2.jsp
This has been driving me crazy...I can't figure out how to get the content div (#main) to push the footer down. If you scroll to the bottom of the page, you'll see how the text "content" goes over the footer and the page doesn't automatically expand depending on the content in the #main div.

Thanks, -ed.

yeti
06-04-2007, 01:30 PM
I think, you simply have to close the wrap div before opening the footer div. I did this with the page I created: http://cashfromchaos.net/index3.php

ahallicks
06-04-2007, 01:35 PM
Put overflow: hidden; in the CSS for the wrapper. You don't need the footer to be outside but I think this is a float clearing issue. Putting overflow: hidden; will clear your floats and push that footer down!

esjjventura
06-04-2007, 03:06 PM
Nope, those didn't work either. I actually want the content in the #main div to determine the height of the page since that's where all of my page content will go.

ahallicks
06-04-2007, 03:09 PM
I'm not quite sure what the problem is? In Firefox and IE6 the footer is pushed to the bottom? Do you want that blue background to extent with the content?

esjjventura
06-04-2007, 03:14 PM
Right, but my content is running behind the footer and below it. I want the stuff in the red bordered box to push the footer down...not run behind it.

yeti
06-04-2007, 03:15 PM
I am sure this is a structural problem.

The normal structure of such a page is:


<div id="container">
<div id="header">
navigation etc.
</div>

<div id="wrapper">
content divs or whatever
</div>

<div id="footer">
credits etc...
</div>
</div>

If you build up the page in that way, there should be no problem with overflowing content (unless you use absolute positioning on your divs).

uuh, btw: I see that your footer div actually is positioned! Remove the position:absolute rule, and it should work!

ahallicks
06-04-2007, 03:15 PM
Try this:



#wrap {
background:url(/img/bgBorders.jpg) top left repeat-y;
min-height:100%;
width:826px;
margin:65px auto 0 auto;
border:3px dotted gray;
overflow: hidden;
}

#footer {
border:3px dotted orange;
width:826px;
color:#FF00FF;
margin-left: -3px; /* Your image is slightly off? this corrects it */
float: left;
}

esjjventura
06-04-2007, 03:23 PM
Ahallicks, that works in FF but it's still broken in IE.

ahallicks
06-04-2007, 04:51 PM
Possibly because I.E doesn't recognise min-height and you will need a hack or conditional style to allow for this. However, I can't see anything in IE6, the page simply is not displaying at all... I can see the faint blue bit at the top but that's all?

ahallicks
06-04-2007, 04:58 PM
Take position relative off the main div and the footer... you don't need them. All you need is the height, width and floats for each of the divs... no positioning stuff for this layout

esjjventura
06-04-2007, 06:20 PM
ahallicks, i tried taking out the relative positions and still a no go in IE7. I have no way of seeing this in IE6...is it still showing up a blank page? (I went ahead and took out all the images so I can see just the css layout).

koyama
06-04-2007, 09:58 PM
I have no way of seeing this in IE6...is it still showing up a blank page?
You weren't suppose to put this into your page:


<!--[if IE]><style type="text/css">
* html body {display:none}
</style><![endif]-->
It is a part of yeti's signature.

yeti
06-05-2007, 08:18 AM
It is a part of yeti's signature.

@ esjjventura: :o I am sorry, if you put my signature on your page! I am going to change it immediately, so nobody else gets confused!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum