Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

nesting div within span problem

Tags:

html

div is a block element and span is an inline element so according to xhtml 1.0 validation it is not right but still several websites uses this method for styling is it all right ? or it will cause some problem please help me ?

like image 433
Mac Avatar asked May 27 '10 09:05

Mac


4 Answers

It is not right + You never need to do this => thus never should.

like image 77
Konerak Avatar answered Nov 07 '22 20:11

Konerak


Websites that do that wont be 'strict xhtml compliant' but in reality HTML like this will work just fine in any modern browser. That doesn't mean you should do it though - because theres no need to.

like image 29
eddiegroves Avatar answered Nov 07 '22 20:11

eddiegroves


As of today 11th March 2014, modern browsers WILL give you problem as they render block element differently from inline element.

I encountered this incident myself, read my experience and solution: http://diophung.blogspot.sg/2014/03/web-developer-conform-to-w3c-standards.html

It's wrong, and embarrassing for not knowing such standard (your web designers will laugh at you) !

like image 32
Dio Phung Avatar answered Nov 07 '22 18:11

Dio Phung


Nesting div within span may cause serious problem in firefox when you need to get the offsetTop(offsetLeft) of the span.

However this performs normal in chrome(v57.0.2987.98).

so I agree with the answer of Konerak:

"the browser will try to interpet it in their own (unspecified/unpredictable) way. It might work out fine, it might break. It might work now, break later. "

It all depends on the browser itself.
The specification about the offsetTop/offsetLeft is here:
https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsettop

The following is my testing code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div style="margin:100px">
        <span id="span-divWrapper">
            <div id="div-nestedInSpan" style="border:1px solid black;">I am the div nested in span</div>
        </span>
    </div>
    <button onclick="showDivOffsetTop()">show div offsetTop</button>
    <button onclick="showSpanOffsetTop()">show span offsetTop</button>

    <script type="text/javascript">
        var div = document.getElementById("div-nestedInSpan");
        var span = document.getElementById("span-divWrapper");
        var showDivOffsetTop = function(){
            alert(div.offsetTop);
        }
        var showSpanOffsetTop = function(){
            alert(span.offsetTop);
        }
    </script>
</body>
</html>
like image 27
PageYe Avatar answered Nov 07 '22 20:11

PageYe