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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 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
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    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!

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes here is a live version www.follaproperties.com/beta/ se e-> faq ... ty in advance ^_^

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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; 04-09-2009 at 03:58 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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;
    	/*margin-right: 42px;*/
    	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 the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great tnx a lot ... As you see I'm not so good at coding layouts, is there any good tutorial that you can recommend?

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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