CSS auto value

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?
 
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!
 
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.
 
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!
 
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 */}
 
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!
 
Ant said:
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!


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



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.
 
Yes it's like that.
Here is an image,
o6hb2c.png


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 */
 
Did what I sent you not work? If you are using a wrapper, you will also have to set height:100% to that too.
 
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 :/
 
Hmm okay, I'll give it a play if someone doesn't know the answer soon. I take it you are using 960.gs?
 
Yes thatis the one, the 12column container.
I'll upload my hole site to pastebin or something and pm it to you.
 
Had a look and adding

Code:
html {    height:100%;}

worked for me. What happens when you tried that?
 
Back
Top