Web Analytics Made Easy -
StatCounter Problem with auto height - CodingForum

Announcement

Collapse
No announcement yet.

Problem with auto height

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Problem with auto height

    hi everybody, I'm having problem with the auto height (cause my page contains borders) here is my code what am I doing wrong (if I set float to left it works)
    #page is the main div (all other divs all included in it)
    the height goes only til bg_980.jpg is reached and not further.

    Code:
    html, body {
    height: 100%;
    }
    
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: normal;
    	background: black;
    }
    
    #page {
    	width: 980px;
    	height: 100%;
    	margin: 0px auto 0px auto;
    	text-align: left;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #444;
    	background: transparent url('../images/bg_980.jpg') no-repeat;
    }
    
    #lang {
    	width: 980px;
    	text-align: left;
    	height: 25px;
    	margin: 0px;
    	float: left;
    	background-color: #000000;
    }
    
    #header {
    	width: 980px;
    	text-align: left;
    	height: 200px;
    	margin: 4px 0px 2px 0px;
    	float: left;
    }
    
    #main {
    	height: auto;
    	width: 980px;
    	margin-right: 0px;
    	margin-left: 0px;
    	text-align: left;
    	float: left;
    	/*	border-width: 1px; 
    	border-style: solid;
    	border-color: blue;
    */
    }
    
    #menu {
    	width: 180px;
    	height: auto;
    	padding-top: 48px;
    	margin-right: 0px;
    	margin-left: 0px;
    	text-align: left;
    	float: left;
    	position: absolute;
    	/*	border-width: 1px; 
    	border-style: solid;
    	border-color: red;
    */
    }
    
    #content {
    	height: auto;
    	width: 780px;
    	padding-top: 15px;
    	margin-right: 42px;
    	margin-left: 220px;
    	text-align: left;
    	float: left;
    	position: relative;
    	/*	border-width: 1px; 
    	border-style: solid;
    	border-color: green;
    */
    }
    
    #footer {	
    	width: 980px;
    	height: auto;
    	margin: 0px auto 0px auto;
    	text-align: center;
    	text-color: blue;
    	color: #B9B971;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: small;
    	font-size: 12px;
    }

  • #2
    start off your css with
    Code:
    * { margin: 0; padding: 0; }
    some browsers do not like height: auto; it depends on the browser.

    Do you have a live preview of your site?

    http://bonrouge.com/3c-hf-fluid-lc.php
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

    Comment


    • #3
      yes here is a live version www.follaproperties.com/beta/ se e-> faq ... ty in advance ^_^

      Comment


      • #4
        Hello k40t1x,

        Here's a few changes that might help

        Code:
        #page {
        	width: 980px;
        overflow: auto;
        	margin: 0px auto 0px auto;
        	text-align: left;
        	border-width: 1px;
        	border-style: solid;
        	border-color: #444;
        	background: transparent url('../images/bg_980.jpg') no-repeat;
        }
        
        #menu {
        	width: 180px;
        	height: auto;
        	padding-top: 48px;
        	margin-right: 0px;
        	margin-left: 0px;
        	text-align: left;
        	float: left;
        }
        
        #content {
        	height: auto;
        	width: 780px;
        	padding-top: 15px;
        	margin-right: 42px;
        	margin-left: 200px;
        	text-align: left;
        }
        In #page overflow: auto; clears the floats. Remove the height and let the div expand as needed.

        in #menu remove the absolute positioning

        in #content reduce left margin to margin-left:200px; See box model (780width plus 220margin is 1000px and your #main is only 980px.) Changing the right margin with margin:0 22px 0 220px will also work there.
        Last edited by Excavator; Apr 8, 2009, 09:58 PM.
        Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
        Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

        Comment


        • #5
          thank you Excavator for your help, but i still have 2 problems:
          * if I remove the absolute from the menu I get one div after the other which is wrong.
          * there is a bad effect ow when I click a link i see first the footer then it goes down and I see then the main. you can see it in http://www.follaproperties.com ty in advande

          Comment


          • #6
            That margin-right:42px; isn't doing much, maybe it all fits with room to spare if you get rid of it.
            Try this -
            Code:
            #page {
            	width: 980px;
            overflow: auto;
            	margin: 0px auto 0px auto;
            	text-align: left;
            	border-width: 1px;
            	border-style: solid;
            	border-color: #444;
            	background: transparent url('../images/bg_980.jpg') no-repeat;
            }
            
            #menu {
            	width: 180px;
            	height: auto;
            	padding-top: 48px;
            	margin-right: 0px;
            	margin-left: 0px;
            	text-align: left;
            	float: left;
            }
            
            #content {
            	height: auto;
            	width: 780px;
            	padding-top: 15px;
            	[COLOR="Red"]/*margin-right: 42px;*/[/COLOR]
            	margin-left: 200px;
            	text-align: left;
            }
            That might address the float drop. I'm not sure what your footer issue is, I don't think I see that in FF3, IE8 or IE7 here.
            Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
            Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

            Comment


            • #7
              Great tnx a lot ... As you see I'm not so good at coding layouts, is there any good tutorial that you can recommend?

              Comment


              • #8
                http://w3schools.com/xhtml/xhtml_intro.asp

                w3schools has it all.
                Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
                Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

                Comment

                Working...
                X