CSS Clear not working if parent has height: 0

empopyAmame

New Member
I've come across a strange CSS issue. Below is my html\[code\]<div id="contact-me-content"> <form action="" method="post"> <label for="contact-name">Name</label> <input type="text" name="contact-name" id="contact-name" placeholder="Your name" /> <input type="submit" style="float:right" name="contact-submit" id="contact-submit" value="http://stackoverflow.com/questions/15455970/Send" /> <div style="clear:both"></div> </form></div>\[/code\]Below is the css\[code\]#contact-me-content{height: 0;padding: 5px;background: #ffffff;border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;}\[/code\]I am floating the submit button right and then trying to clear the float so that the form is contained in the parent div. Because the parent div has height:0 the clear isn't working. However if I remove the height: 0 it works fine. Does anyone know a way round this or can give me a explanation?Thanks
 
Back
Top