Grow your CSS skills. Land your dream job.

Why webdesigner use this

  • # September 19, 2008 at 6:16 am

    Why webdesigner use this

    Code:
    box
    # September 19, 2008 at 6:37 am

    What exactly are you asking?

    # September 19, 2008 at 7:02 am

    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

    # September 19, 2008 at 7:21 am

    Thanks chazzwick for quick reply.but every time putting inside div in a div is sematic ?

    box
    # September 19, 2008 at 8:06 am
    "jitendra" wrote:
    Thanks chazzwick for quick reply.but every time putting inside div in a div is sematic ?

    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:

    Code:

    content here

    Unless there’s more you wish to achieve that you haven’t yet mentioned.

    # September 19, 2008 at 9:36 am

    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 ?

    box
    # September 19, 2008 at 9:40 am

    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.

    # September 19, 2008 at 9:58 am

    but many known web designer using this technique for creating Cross browser sites mainly for sidebars

    box
    # September 19, 2008 at 10:12 am

    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.

    # September 19, 2008 at 12:03 pm

    BOX first of all thx for all your replies.

    See chazzwick commnets :

    Code:
    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.
    box
    # September 19, 2008 at 5:48 pm

    I’ve tried to explain as best I can. It’s up to you now to do what you think is right.

    # September 20, 2008 at 12:19 am

    why i posted last post because you said

    Quote:
    Nested divs will not enhance browser compatibility at all.

    But according to chazzwick it does so I’m confused.

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

    and see this on this Page below figure 9.4 : http://www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html?start=3

    Quote:
    To improve the layout and to add some breathing room to the content, we need to add some column spacing, commonly called "gutter." Unfortunately, there is a problem here. You might know that Internet Explorer does not interpret CSS correctly. One problem is that it calculates width differently. We can solve this problem by not using any padding or borders on something that has a width. To get our gutter, we add another <div> element inside the columns.

    To the CSS we add

    Code:
    .inside {padding:10px;}
    Code:


    box
    # September 20, 2008 at 8:34 am

    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.

    # September 20, 2008 at 9:21 am

    I agree now but see this about conditional comments :http://www.christianmontoya.com/2007/02/02/why-i-avoid-using-conditional-comments/

    box
    # September 22, 2008 at 4:32 am

    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.

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".