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

Popular posts from this blog

matlab - Deleting rows with specific rules -

php - MySQLi multi_query results for later use -