Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS auto value

Discussion in 'Website Design Forum:' started by mrp2049, Mar 7, 2011.

  1. mrp2049

    mrp2049 Senior Member

    Ok, I've tried doing some reading on this, and I think I understand it, but can someone just say yes or no before I start using it...

    If I put:

    height:auto;

    that will mean the div containers height will be governed by the content rather than an assigned value.

    Correct?
     
  2. kurtiscaston

    kurtiscaston Member

    Yes, I'm pretty sure it will scale to your content. But honestly try it out, it would only take a few seconds.
     
  3. mrp2049

    mrp2049 Senior Member

    I want to rss the content, so without uploading it all I was hoping someone would just tell me yes.

    So thank you very much!

    I can code away now!
     
  4. Harry

    Harry Senior Member

    height:auto; is the same as not specifying a height at all, FYI.
     
  5. mrp2049

    mrp2049 Senior Member

    Right, this sounds more scary! I'll try it and see what happens.
     
  6. Harry

    Harry Senior Member

    By default a div is height:auto; so applying it in your CSS won't change anything unless you've set an explicit height previously yourself.
     
  7. mrp2049

    mrp2049 Senior Member

    I think I understand that. I am sorry if I come off like a doughnut when it comes to coding. I'm trying to learn and I am a print designer at heart! Give me CMYK over CSS any day!
     
  8. Harry

    Harry Senior Member

    Haha no worries. Basically this:

    Code:
    div{  color:red;  height:auto;}
    is the same as:

    Code:
    div{  color:red;}
    unless you have this:

    Code:
    div{  color:red;  height:250px;}div{  height:auto; /* This overwrites the 250px height up there */}
     
  9. mrp2049

    mrp2049 Senior Member

    Thanks Harry. I'll post an update of the result somewhere when they are done.
     
  10. Ant

    Ant Member

    Sorry to hijack this, but it seems terrible making a new post on it as it's to do with the height element too.

    Say i have a block colour for my navigation, but the nav buttons only take up say 50% of the page. How can i get the height (the block colour behind) to the height of their screen?

    Hope you get it, and once again, mr p sorry for hijacking the thread!
     
  11. Alex L

    Alex L Senior Member


    Not quite sure what you're asking here is the navigation horizontal or vertical. Anyway, is this is what you are trying to do:

    [​IMG]

    Uploaded with ImageShack.us

    If so, set the div around the navigation to height 100% and set html, body to 100%. Think that should work but for best results, post up the code and I'm sure someone will be able to help you.
     
  12. Ant

    Ant Member

    Yes it's like that.
    Here is an image,
    [​IMG]

    The dark grey is in a div called left, then there is another div for my name, then for the links.
    here is the 'left' CSS.

    Code:
    /* Start of the left hand column CSS */		#left {		background-color:#333;		padding:0;		margin:0;		height:100%;	}	#name {		font-size:30pt;			font-family:"Arial Black", Gadget, sans-serif;		color:#FFF;		margin-top:40px;		padding:0;		text-align:center;	}		/* nav css */	#nav {		color:#FFF;		margin-top:50px;		margin-left:20px;		font-size:12pt;	}	#nav p.navlinks {		font-size:16pt;		padding:0;		margin:0;		color:#fff;	}	#nav ul {		padding:0;		list-style-type:none;			color:#ffcc00;	}	#nav ul a, a:hover {		color:#ffcc00;		text-decoration:none;	}	#nav ul a:hover {		color:#e4b600;		text-decoration:none;		}	#nav p.navlinks a, a:visited {		color:#fff;		text-decoration:none;	}	#nav p.navlinks a:hover {		color:#ccc;		text-decoration:none;		}	/* end nav css */
     
  13. Alex L

    Alex L Senior Member

    Did what I sent you not work? If you are using a wrapper, you will also have to set height:100% to that too.
     
  14. Ant

    Ant Member

    Alex, no it didn't work for some strange reason, it stayed at the same height. I'll keep playing with it.
    The problem probably lies somewhere in the 960 grid system. I am using it as it was easy to do the layout. Have set the container_12 to height:100% too though and yet it still doesn't work :/
     
  15. Alex L

    Alex L Senior Member

    Hmm okay, I'll give it a play if someone doesn't know the answer soon. I take it you are using 960.gs?
     
  16. Ant

    Ant Member

    Yes thatis the one, the 12column container.
    I'll upload my hole site to pastebin or something and pm it to you.
     
  17. Alex L

    Alex L Senior Member

    Had a look and adding

    Code:
    html {    height:100%;}
    worked for me. What happens when you tried that?
     
  18. mrp2049

    mrp2049 Senior Member

    Hell I don't mind! Anything that helps people!
     
  19. Ant

    Ant Member

    Haha, Alex that worked, thanks alot.
    And thanks mr p!
     
  20. Alex L

    Alex L Senior Member

    No problem :)
     

Share This Page