A series of divs or an enclosing div? What renders better?

[bcc1234]

What renders the page better if there are some heavy elements (like images) in the middle?

If I have one outer div and a bunch of inner divs or if I don't use any outer div at all?

<div "some overall styling, like margins">
<div>....</div>
<div>....</div>
<div>....</div>
<div>....</div>
</div>


vs.

<div "some overall styling, like margins">....</div>
<div "some overall styling, like margins">....</div>
<div "some overall styling, like margins">....</div>
<div "some overall styling, like margins">....</div>

Would the first way make the page hang until the browser has enough data to render the complete contents of the outer div?

[lucy24]

Would the first way make the page hang until the browser has enough data to render the complete contents of the outer div?

No, why would it? What takes time isn't the html, it's loading up the supporting files. Make sure all your <img> elements include width and height declarations, so the browser can start rendering the page right away instead of having to wait until it knows what to do.

"some overall styling, like margins"

This may not have been the best randomly chosen example, since "margin" can include top and bottom, or the distance between two of the same thing (just like having consecutive paragraphs instead of a single paragraph with hard line breaks). If you need a clear beginning and ending, that's separate divs. If it's all the same, it's one div. If everything should have the same left and right margin, that's a containing div.

None of this is mutually exclusive; you can have nested divs. But if they're nested to a depth of seven, you're using the wrong cms ;)

[eurohttp]

For simplicity it is better not to use outer div. But its up to you. It is not some formula.
You only need to know that outer div can make problems if you add divs next to it or under it more than using only bunch of divs.

[lucy24]

outer div can make problems if you add divs next to it or under it more than using only bunch of divs

My shared css-- the default used by all pages-- says among other things

div {margin: 0; padding: 0;}

meaning that a div in and of itself will have no effect on page appearance. By default, a div is a block-level element, so you needn't say anything about that; by default, a div has no border, so ditto ditto; by default a div ... et cetera. Any variations from the default should apply only to named divs.

Although this is the HTML subforum, keep in mind that a div isn't really an HTML property. That is, it doesn't have built-in attributes like a <p> or <ul> or <table> or <h1>. It's simply a holder for any styles you need to apply at the block level, just as a span is a holder for styles applied inline. If you've got a string of
<p class = "classname">
<p class = "classname">
<p class = "classname">
based on
p.classname
in the CSS, then that's the time to go to a
<div class = "somename">
<p>
<p>
<p>
paired with
div.somename p
in your CSS.

[Accelerator]

The way that browsers work is that all the HTML code gets parsed/downloaded first. Any stylesheets or images encountered are downloaded in parallel. For example, an image never blocks the rest of the page being loaded.

In terms of speed of rendering, I think there would be little if any difference in the examples you gave.