0

Given the following HTML code:

<html>
<body>
<head>
<style>

#myDiv{
  background:orange;
  width:300px;

}

.a{
  margin:5px;
  background:purple;
}

</style>
</head>
<body>
<div id="myDiv">
  <p class="a">A<br>A</p>
  <p class="b">B</p>
</div>
</body>
</html>

Why is it that when I add float:right to .a, the myDiv shrinks?

Would you agree with my answer?

Because CSS floats are positioning properties. The paragraph referenced to as 'a' is positioned with a float CSS property and breaks out of the flow of the div 'myDiv'. That's why the 'a' element is positioned at the right corner of the div 'myDiv'. The browser renders 'myDiv' without the floating paragraph 'a'. That is why the browser only draws a background behind the node value of the paragraph referenced to as 'b' and stretches it 300 pixels wide, following the CSS declaration of the html head element.

5
  • possible duplicate of Why does a float css property resize a div's size?
    – Kyle
    Oct 17, 2011 at 22:50
  • 1
    Block formatting contexts
    – BoltClock
    Oct 17, 2011 at 22:51
  • @Kyle Sevenoaks: This one has more context. He probably didn't want to edit his existing one lest it made the existing answers/comments obsolete.
    – BoltClock
    Oct 17, 2011 at 22:53
  • Yea I wanted to break it down in more questions. Well we could delete the other one and if you'd like this one too, b/c I think my answer is quite good. Oct 17, 2011 at 23:02
  • True, but the OP can always append edits to the bottom of the question.
    – Kyle
    Oct 17, 2011 at 23:02

1 Answer 1

-1

you may like this

<div id="myDiv">
  <p class="a">A<br>A</p>
  <p class="b">B</p>
  <div style="clear:both;"></div>
</div>
1
  • 1
    "Why is it that when I add float:right to .a, the myDiv shrinks?" "you may like this workaround" ???
    – BoltClock
    Oct 17, 2011 at 22:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.