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