Jump to content

Nested Divs


ShadowMage
 Share

Recommended Posts

Hi guys, me again.I just have a quick question about div's. They can be nested right?Ex.

<div>  <div>text</div>  <div>more text</div></div>

So why aren't they nesting for me? I have a similar structure as my example above. The problem is that the container <div> terminates after the first nested one. What gives? I also have some tables nested inside some div's as well as other div's and some span's and input's. I made sure that all of my tags are closed, in fact my code passes validation through the HTML Validator add-on for firefox.*Edit:I just tested this in IE and it works, just not in firefoxI'm completely lost, any and all help is very much appreciated. If there is any other information you'd need I'd be happy to post it.Thanks in advance,jkloth

Edited by jkloth
Link to comment
Share on other sites

Nested DIV's are fine.I just cut and pasted your code in to HTML <body> tags and it displays fine in FF, IE, Chrome, Safari and Opera.What exactly do you mean by this - what is telling you that the <div> terminates?
There is some background color formatting that only covers part of the area that the div is supposed to cover. Also if I add a border around it, the border encloses only part of what it is supposed to.This is how my code looks:
<div class='tip_body'>	<div style='width: 650px;'>		<div class='systemHdr'>Wall Panel Systems</div>   <!-- The formatting only gets this far -->		<div class='skylightInfo'>...</div>		...	</div>	...</div>

The formatting for the tip_body stops after the systemHdr <div>

Link to comment
Share on other sites

It sounds as if the second <div> element is either absolutely positioned or has been floated.
Yes, I have it floating to the left. But if it's inside another <div> that shouldn't matter should it. I've done that before with no apparent problems.You are refering to the skylightInfo <div> right? Edited by jkloth
Link to comment
Share on other sites

Floated <div> elements are ignored when calculating the size of the parent element.If you want it to be taken into account, you must add overflow: auto; or overflow: hidden; to the parent element. Some browsers will only do it correctly if you have assigned a width to the parent element, but most of them will render it correctly in any situation.

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
 Share

×
×
  • Create New...