jherzog Posted October 13, 2005 Share Posted October 13, 2005 Okay I am experienced with HTML and have used CSS for basic formating purposes for sometime. It has been suggested to me that I move from using HTML tables to CSS for page layout purposes. I am experiencing some issues that imply I don't know CSS well enough to impliment this fully. Which leads to my question (probably my first of many ).I have set up a Division(Div) and I want its height to adjust automatically to fit all of the content inside of it. However, the content inside of this division is other divisions. The First div seems to ignore these other divisions and there for has a height of zero. Is this true? Any suggestions or what to do? Is there a good resource to teach one how to fully use css specifically for page layout and positioning?Here is a very quick and basic example of what I am doing:<body><html><head><style type="text/css">div.1{height:auto;background-color:#000000;}div.2{position: absolute;top:10px;left:10px;width:10px;height:50px;background-color:#ffffff;}</style></head><body><div class="1"> <div class="2">This is a white text box defined in Div 2. Yet since it is also inside Div 1 the page should have a black background as high as this text box, right? </div></div></body></html> Link to comment Share on other sites More sharing options...
Paim Posted October 14, 2005 Share Posted October 14, 2005 Im pretty sure absolute positioning takes it out of the normal flow of the page into a world of its own. Try changing the div.2 to: div.2 {margin-top:10px;margin-left:10px;width:10px;height:50px;background-color:#fff;} And see if that works. Link to comment Share on other sites More sharing options...
louie Posted October 14, 2005 Share Posted October 14, 2005 You should change the position to "relative". Try the code below. <html><head><style type="text/css">div.1{height:auto;background-color:#000000;}div.2{position: relative;top:10px;left:10px;width:10px;min-height:50px;background-color:#ffffff;}</style></head><body><div class="1"><div class="2">This is a white text box defined in Div 2. Yet since it is also inside Div 1 the page should have a black background as high as this text box, right?</div></div></body></html> and i also change the height property of div 2 two to "min-height", since it is stretching. Link to comment Share on other sites More sharing options...
Paim Posted October 15, 2005 Share Posted October 15, 2005 isn't that the same effect as mine? Position:relative and 10px top and left is the same as margin-left and margin-top:10px, no? Can't remember. Link to comment Share on other sites More sharing options...
louie Posted October 15, 2005 Share Posted October 15, 2005 isn't that the same effect as mine? Position:relative and 10px top and left is the same as margin-left and margin-top:10px, no? Can't remember.<{POST_SNAPBACK}> Yep... pretty much the same. I just edited jherzog's own code. There a lots of ways of doing it. depends on the coder how he does it. Link to comment Share on other sites More sharing options...
jherzog Posted October 19, 2005 Author Share Posted October 19, 2005 Thanks guys for all of the suggestions. You certainly lead down the correct path. My ideas of what absolute and relative position was not exactly right. I have read up on it now.I have another follow up question. and i also change the height property of div 2 two to "min-height", since it is stretching.<{POST_SNAPBACK}> The min-height feature is quite handy, in fact becoming nessecary as this site develops. I now have a section that has to streach to fit whatever its contents might be but also must have at least a minimal height. However IE doesn't recognize this min-height attribute. How do you work around that?Jed Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now