Jump to content
jherzog

Div inside Divs

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>

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
:) 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.

Share this post


Link to post
Share on other sites
:)  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.

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. :)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...