habgyp Posted October 6, 2012 Report Share Posted October 6, 2012 I have encountered a perplexing phenomenon on a site I'm working on that I have not run into prior. To start, I've created a simple template with one main DIV (ID="container") that I've centered through left/right margin values of auto. The "container" DIV is then divided into four DIV's stacked on top of each other. These ID's are as follows: "header", "menu", "body" & "footer". Pretty straight-forward stuff and all the basic formatting works just peachy. Even when I put some content (headers, paragraphs, links, images, etc.), everything still seems to work as one would expect. I have several nested DIV's within the ones above (ie within the "menu" DIV, each link is in a "nav" DIV). The problem occurs when I add "float:left" to any of my ID's or CLASSES in my style-sheet. The browser then collapses the containing DIV & kicks the nested DIV's outside. Strangely, I can set a height to the CLASS or ID and it will pull the nested DIV back inside (assuming the height parameter is large enough to contain the content in the nested DIV). My understanding is that an element (block level, for instance such as a DIV) *should* stretch (vertically) to accommodate content unless set to a specific value. The behavior I'm experiencing seems similar to what you would encounter if you forgot to close DIV tag somewhere and it kicked the content out of its containing element. In my case this is *NOT* what is happening... the html code is error-free; the problem doesn't happen until the float:left CSS is added to the ID or CLASS. I am seriously perplexed. Anyone have a clue what I am doing wrong? Quote Link to comment Share on other sites More sharing options...
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.