Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div not expaning outer Div.

    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.
    Last edited by esjjventura; 06-04-2007 at 02:05 PM.
    www.MendYourFuelishWays.com
    Save the environment, run your car on vegetable oil

  • #2
    New Coder
    Join Date
    Jun 2006
    Location
    Graz, Austria
    Posts
    81
    Thanks
    2
    Thanked 1 Time in 1 Post
    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
    webmaster and member of
    http://cashfromchaos.net

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    New Coder
    Join Date
    Jun 2007
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    www.MendYourFuelishWays.com
    Save the environment, run your car on vegetable oil

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    New Coder
    Join Date
    Jun 2007
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    www.MendYourFuelishWays.com
    Save the environment, run your car on vegetable oil

  • #7
    New Coder
    Join Date
    Jun 2006
    Location
    Graz, Austria
    Posts
    81
    Thanks
    2
    Thanked 1 Time in 1 Post
    I am sure this is a structural problem.

    The normal structure of such a page is:

    Code:
    <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!
    webmaster and member of
    http://cashfromchaos.net

  • #8
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Try this:

    Code:
    #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;
    }
    Last edited by ahallicks; 06-04-2007 at 04:20 PM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #9
    New Coder
    Join Date
    Jun 2007
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahallicks, that works in FF but it's still broken in IE.
    www.MendYourFuelishWays.com
    Save the environment, run your car on vegetable oil

  • #10
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #11
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #12
    New Coder
    Join Date
    Jun 2007
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).
    www.MendYourFuelishWays.com
    Save the environment, run your car on vegetable oil

  • #13
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by esjjventura View Post
    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:
    Code:
    <!--[if IE]><style type="text/css">
    * html body {display:none}
    </style><![endif]-->
    It is a part of yeti's signature.

  • #14
    New Coder
    Join Date
    Jun 2006
    Location
    Graz, Austria
    Posts
    81
    Thanks
    2
    Thanked 1 Time in 1 Post

    I am sorry

    Quote Originally Posted by koyama View Post
    It is a part of yeti's signature.
    @ esjjventura: I am sorry, if you put my signature on your page! I am going to change it immediately, so nobody else gets confused!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •