Jump to content

Div inside Divs


jherzog

Recommended Posts

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

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

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

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.

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...