Logical grouping of HTML elements using a DIV with disply:inline for CMS widgets

HTML & CSS
1

Hi there,

I’m trying to come up with a way to logically group HTML elements using a container, but I’d like to be sure that the container does not alter the layout of the page, and is as semantic as possible.

Why? It’s to be used in a CMS as a standardised way to tell Javascript that the children of the container make up an instance of a particular class of widget in the CMS.

My first idea is to use a DIV with display:inline to group the elements, what I need to know is how will this alter the layout compared to just having the elements without the inline DIV wrapped around them. So far I haven’t found any differences in my testing.

So this:


<html>
    <body>
        <div class="grouper" style="display:inline" >
            <h1>Heading</h1>
            <p>Some Content</p>
            <ul>
                <li>Stuff 1</li>
                <li>Stuff 2</li>
            </ul>
        </div>
    </body>
</html>

Compared to this:


<html>
    <body>

            <h1>Heading</h1>
            <p>Some Content</p>
            <ul>
                <li>Stuff 1</li>
                <li>Stuff 2</li>
            </ul>

    </body>
</html>

So other than the obvious CSS implications, can anyone see any other issues with doing it this way, or suggest any better ways? The content of the grouper DIVs could be anything at all, depending on the requirements of the widget in question.

I’d love a HTML tag maybe called GROUP, user agents would ideally not apply any form of layout or style to the GROUP tag, it would be purely used as a hook for Javascript.

Cheers

2

I don’t see why you’d need to set the div to inline. The children inside it are blocks anyway.

Unless you add something to the div like a background-color or border or something, nobody’s going to see it. It will naturally (as a static block) be 100% width of its container (looks here to be the body), and will auto-height to its content. But even if its content were floated and it didn’t auto-height to them (since static containers ignore floated children), visually you wouldn’t know the difference.

Div is in fact exactly what you mean when you wish for “group”. It’s a block element that semantically doesn’t mean anything more than “the developer writing this HTML wanted something to group this content with” without giving any semantic hints that this content actually has any relationship with each other or anything.

Even if you set widths on the inner content, whether there was a div around them or not, content coming later would not be able to “ride up” alongside them. If you floated them, then you start getting some interesting effects.

Otherwise, your other choice is giving all those elements classes and using a getElementsByClassName() hand-made or lib function.

3

The content of the “grouper” DIV could be anything including a single SPAN, IMG, INPUT or any combination of inline and block elements, this is the reason I need to set “display:inline”, I’m hoping to keep those elements rendering as they would without the DIV surrounding them.

A DIV in it’s natural state is a block element so if it were to appear say in the middle of a block of text then it would affect the layout. So my wish for the GROUP tag is that under no circumstance would it change the layout.

And that in essence is my question, does using an inline DIV as the “GROUP” container achieve this in all situations, including being in the middle of a text block surrounding one or more inline elements?

Yes this is a good idea, I’m going to have a play with this to see if there are any issues with doing it that way. Thanks :tup: