html - why do I need clear:both in the #message declaration -
if have clear:both; in #message declaration padding-top:30px; in #message p declaration correct if remove clear:both in the
#message declaration padding-top:30px; doesn't take effect. why need clear:both in #message declaration being able use padding-top in #message p declaration.
css
body { margin: 5px; padding: 0; font-family: arial, sans-serif; font-size: small; text-align: center; width: 768px; } #register { float: left; width: 100%; margin: 0; padding: 0; list-style: none; color: #690; background: #bddb62; } #register { text-decoration: none; color: #360; } #reg { float: left; margin: 0; padding: 8px 14px; } #find { float: right; margin: 0; padding: 8px 14px; } #message { clear: both; font-weight: bold; font-size: 110%; color: #fff; text-align: center; background: #92b91c; } #message p { margin: 0; padding-top: 30px; } #message strong { text-transform: uppercase } #message { margin: 0 0 0 6px; padding: 2px 15px; text-decoration: none; font-weight: normal; color: #fff; } html
<ul id="register"> <li id="reg">not registered? <a href="#">register</a> now!</li> <li id="find"><a href="#">find store</a></li> </ul> <div id="message"> <p> <strong>special week:</strong> $2 shipping on orders! <a href="#">learn more</a> </p> </div>
why floating register element? there's no point if has 100% width, , causes problem having. without clearing following element, padding on paragraph slides under floated element.
Comments
Post a Comment