html - Why does a div with display:none break formatting? -
the html code below consistently results in text , textb not being horizontally aligned removing <div style="display:none;"> </div>
fixes alignment. discovered using div
elements instead of p
elements fixing issue, wondering going on. saw behavior in in opera, firefox, ie (ie puts textb on separate line), , chrome.
my expectation div display:none
not have impact on formatting.
<html> <body> <div style="border-top-style: solid;"> <p style="float:left; width:280px;"> text a<div style="display:none;"> </div> </p> <p style="float:left;"> textb </p> </div> </body> </html>
div
not valid child of p
, browser applies error correction html end this:
<div style="border-top-style: solid;"> <p style="float:left; width:280px;"> text a</p><div style="display:none;"> </div> <p></p> <p style="float:left;"> textb </p> </div>
(html taken chrome's inspector)
note p
element.
Comments
Post a Comment