Hello,

 

Im having difficulty with a CSS layout. I have a centered container div with a 'margin:auto' property, and then two nested column divs for nav and content inside. Once i float these nested divs (left & right) they come away from there parent conatiner div. What is the correct way of coding this? Here is a snippit of my code:

 

#container  {margin:auto;
                  width:850px; 
                  height:100%;
    }

#navigation { width:250px; 
     height:500px;
                    float:left;
   }

#content { width:500px;
                height:500px;
 float:right;
	  }

 

hope that makes sence

try float both of them left, rather than left+right

 

it should work, as a method btw

Same thing happens, the nested elements are not sitting in the container at all, could be something to do with the parent div not being floated, so they come away from it.

When you say 100% on the container properties - 100% of what? If you haven't declared a height for, say the body, the total height of the container might be less than it's children, and not expanding to accomadating them? Just a thought.....

Theres is no %100 tag for height, its not possible to declare this tag it can only be %100 width, you have to specify a certain height. Wat does you html look like that could also be the problem.

Theres is no %100 tag for height, its not possible to declare this tag it can only be %100 width, you have to specify a certain height.

 

If that were true, then how would liquid 3 column etc. layouts be possible?

That's because the three columns are "columns", and each expands to the height of the content in each column.

 

If you wanted to give the impression that the columns are of equal height, say by using background colours, it is possible but there are numerous ways to achieve the effect - too many to go into here