Why is my second row being placed between the two opposing floats
Why is the second row with selector #message slipping in between the
opposing floats.
My thought, the reason for this behaviour is that when you float in this
case one to the
left and one to the right the space in between is free available space
which the second row take advantage of that's the reson according to my
knowledge. The floated element to the left and right will only take up as
much space as they need and they are considered to be block element.
If I remove the comment on clear:both; in selector #message then it works
and that is
because you clering the #message element saying this element is not
allowed to sit between an element that is floating.
I just want to confirm with you if my thought of understanding is about
right.
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: small;
text-align: center;
width:768px;
}
#register
{
margin: 0;
padding: 0;
list-style: none;
background: yellow;
}
#reg
{
float: left;
margin: 0;
padding: 8px 14px;
background:red;
}
#find
{
float: right;
margin: 0;
padding: 8px 14px;
background:blue;
}
#message
{
/*clear:both;*/
text-align: center;
background: #92B91C;
}
</style>
</head>
<body>
<div id="container">
<ul id="register">
<li id="reg">Not registered? <a href="#">Register</a>
now!</li>
<li id="find"><a href="#">Find a store</a></li>
</ul>
<div id="message">
<p><strong>Special this week:</strong> $2 shipping on all
orders! <a
href="#">LEARN MORE</a></p>
</div>
</div>
</body>
</html>
//Tony
No comments:
Post a Comment