Paypal form busted its wrapping div element

HTML & CSS
1

Hi gurus,

I have a strange problem:

Here is the markup:

<div class=“booksMiddle”>
<a href=“”>
<img class=“photo” src=“tonyblair.jpg” alt=“Tony Blair former PM” /></a>
<h4>Holy Mountain<span>George Bush</span></h4>
<p> One Use Case could include the functionality of another as part of its normal processing. Generally, it is assumed that the included Use Case is called every time the basic path is run. For example, when listing a set of customer orders to choose from before modifying a selected order, the <list orders> Use Case would be included every time the <modify order> Use Case is run.
</p>

    &lt;div class="payments"&gt;
       &lt;label&gt;Free reading&lt;/label&gt;
       &lt;form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"/&gt;
       &lt;/form&gt;
     &lt;/div&gt;   &lt;!--paypal button--&gt;
   &lt;/div&gt; &lt;!--booksMiddle--&gt;

Here is the style:

div.booksMiddle
{
clear: both;
border-top: 1px solid blue;
border-bottom: 1px solid blue;
}

outcome:

The paypal button is placed under the bottom border of div classed middleBooks.

Can you explain to me why the paypal button is not placed in the div element? How can I place it within?

Thanks,
Charlie

2

Thanks for reply.
Yes, you are so right! The booksMiddle not enclosing its floated children, and adding overflow: hidden fixes it. I just donot understand why. overflow: hidden is not for enlarge the box. Can you explain?
Thanks a lot.
Charlie

3

Without knowing the rest of the code, no clue. As usual, PayPal offers garbage, not HTML. That code’s not sensible, logical, or valid (why is the label outside the form? Where’s the submit button?).

You’ll have to post more code I think.

Well, if the “payments” div is floated, then actually it’s just booksMiddle not enclosing its floated child. If booksMiddle doesn’t have any other CSS, so no dimensions like width or height, then you could try adding overflow: hidden to booksMiddle to get it to enclose its float. However, I don’t know if the paypal button is floated so this is just a wild guess on my part.

4

Great! Thanks a lot. Charlie

5

Overflow: hidden is a setting that is meant for boxes with set widths or heights (or both), to hide any child content that is larger.

div {
width: 400px;
height: 300px;
overflow: hidden;
}

Here, any inside content that is wider than 400px or taller than 300px will disappear, and is not accessible to the user.

If it’s overflow: auto, the box doesn’t grow but the children are accessible because there’s a scrollbar.

That’s overflow’s Day Job. The default on all elements is “overflow: visible” and normally, on a box with height and width set, any overflowing children just spill out. You’ll only see that they are spilling out if the container has a background colour, background image, or border.

It happens that if a box has no dimensions, you can still put overflow: hidden on it.

In order for a box to deal with overflow, it must know if its children are larger than its dimensions… even if it doesn’t have any explicitly set dimensions in the CSS. So, this includes floats too. The rules change, and the box can “see” the bottoms of its floated children.

Using a copy of IE7 or IE6, and then a modern browser (any other browser), you can see it happening in these pages. There’s float clearing in there, and then float enclosing. Overflow encloses floats.

http://gtwebdev.com/workshop/floats/enclosing-floats.php explains as well.