Welcome to WebmasterWorld Guest from 34.229.126.29

Forum Moderators: open

Message Too Old, No Replies

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

     
10:40 am on May 11, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 1, 2002
posts:1427
votes: 2


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?
6:28 pm on May 11, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15636
votes: 795


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 ;)
4:04 pm on May 16, 2016 (gmt 0)

New User from ZW 

joined:Oct 1, 2014
posts:14
votes: 0


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.
4:24 pm on May 16, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15636
votes: 795


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.
5:39 pm on June 8, 2016 (gmt 0)

New User

10+ Year Member

joined:June 4, 2004
posts: 27
votes: 0


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members