• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

CSS auto value


mrp2049

Senior Member
#1
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?
 

mrp2049

Senior Member
#3
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!
 

Harry

Senior Member
#6
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.
 

mrp2049

Senior Member
#7
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!
 

Harry

Senior Member
#8
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 */}
 
#10
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!
 

Alex L

Senior Member
#11
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.
 
#12
Yes it's like that.
Here is an image,


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 */
 
#14
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 :/