Presenting a simplified example of my previous query, I am still seeking clarification regarding the necessity of using clear:both to enable padding-top. Can someone provide a straightforward illustration to elucidate the usage of float and clear?
Hence, my inquiry persists:
I remain puzzled about the requirement for clear:both in the declaration of #message in order to execute this particular statement:
#message p
{
padding-top: 30px;
}
<!DOCTYPE>
<html>
<head>
<title>testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body
{
text-align: center;
width: 768px;
}
#register
{
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
color: #690;
background: #BDDB62;
}
#message
{
clear: both;
text-align: center;
background: #92B91C;
}
#message p
{
padding-top: 30px;
}
</style>
</head>
<body>
<div id="register">
<p style="float:left">We float left</p>
</div>
<div id="message">
<p>Paragraph after floated element</p>
</div>
</body>
</html>