it might be due to the box model problems of IE. You cant apply a width and margin/padding to a div without it screwing up, so you define the width on the "header" div and define padding/margin on the "inside" div.
Read this for more info http://www.w3.org/TR/CSS2/box.html
It depends on what you’re trying to achieve and the nature of the content. Normally you wouldn’t need to place another div inside a header div unless you had a fairly complex arrangement of other block-level elements that needed to be grouped into a division before being floated. On a pure semantic standpoint, a div should only be used to declare a relationship between a number of block-level elements – more often than not, extra divs or inappropriate divs are added to an HTML document in order to allow for complex layouts. Although a little naughty, in moderation this is deemed reasonably acceptable practice.
As for your code example, as it is such a basic markup I cannot see any reason why you would ever need to use that arrangement. A more semantic arrangement would be:
Unless there’s more you wish to achieve that you haven’t yet mentioned.
i just mention the header for example. id can be anything. my only purpose to ask this is " using div in a div to solve MS Internet Explorer Problems is semantically correct. is this a good habit. any other alternative available. using div in div increase the source code file size ?
It is not semantically correct in any browser. You really need to understand what a div is and why you should or shouldn’t use one. I have tried to explain in my previous post but perhaps you’ll need to research further. It is possible to create a perfectly functional website with attractive layout using web standards and not even use one div. There are only very rare circumstances where you need to use nested divs and these will never be semantic as they will most likely be for layout purposes – which is against the core principles of web standards.
Doesn’t make it right. But, like I said earlier – you can create a division of related elements. So A sidebar might be a side-header, list of links and a meta list – these block-level elements may be wrapped in a div to then float against the main content. But still, there’s no nested div being used.
For any website, you identify the content, markup that content semantically with appropriate tags before adding your styling. Nested divs will not enhance browser compatibility at all.
BOX first of all thx for all your replies.
See chazzwick commnets :
why i posted last post because you said
But according to chazzwick it does so I’m confused.
and see this on this Page below figure 9.4 : http://www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html?start=3
To the CSS we add
You should never add markup to accommodate one browser. The issues with IE6 are CSS issues, so should be addressed using CSS and not HTML! A conditional comment may be applied to the header of your html document calling for an IE specific CSS file that ‘corrects’ those issues. The example that you give is tantamount to divitis and is very bad HTML markup practice. Some designers might use that nested div method – but they are wrong to do so and it is unnecessary.
I agree now but see this about conditional comments :http://www.christianmontoya.com/2007/02/02/why-i-avoid-using-conditional-comments/
Firstly – do not believe everything you read on the internet! Secondly, if you are reading about someone’s personal opinion, then use that to form your own opinion, but don’t take it as gospel. Thirdly, follow best practices (like those I have already laid out) and if, after considerable usage you feel that there’s a better/alternative method – use it and document your reasons for change.
Conditional comments are the lifeline for users of older/non-standards-compliant browsers to be able to enjoy the web like the rest of us. The link you gave is someone who is ridiculously paranoid and perhaps doesn’t understand completely the function and usage of a conditional comment.
If you want to learn good web design practices, stick the the main websites like A list Apart, Sitepoint and the like. Personal blogs are unreliable unless you really know how to interpret them.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".