Кажется, что iframe ломает макет CSS

Question

Кто-нибудь может сказать, почему это не так? Я думал, что желтый div будет по всей странице, как розовый div. Но когда я смотрю на это - нет, желтый div выравнивается под изображением, а не на всю длину.

<div style=width:100%;background:pink>
    fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style=width:100%;background:red>
    <div style=width:60%;float:left>
        <img src=Library_left.jpg width=100%>
    </div>
    <div style=width:40%;float:right>
        <iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php">&nbsp;</iFrame>
    </div>
</div>
<div style=width:100%;background:yellow>
    <h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>

(https://silib2.net/eResources/scripts/carousel/form.htm)

Это наверное что-то глупое?

Answer 1

Статическая высота до iframe Может решить вашу проблему

<iframe scrolling="no" frameborder="0" width="100%" height="165px" src="https://silib2.net/eResources/scripts/carousel/carousel.php">&nbsp;</iframe>

Answer 2

Вам нужно, чтобы ваш iframe имел меньшую высоту, которая была бы приблизительно

    height: 225px;

И вам нужно дать div, который обертывает его [тот, что на красном фоне]

  clear:both; Overflow:hidden;

Answer 3

Пожалуйста, попробуйте это: -

<div style=width:100%;background:pink>
    fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style="width:100%;background:red; clear: both; overflow: hidden;">
    <div style=width:60%;float:left>
        <img src=Library_left.jpg width=100%>
    </div>
    <div style=width:40%;float:right>
        <iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php">&nbsp;</iFrame>
    </div>
</div>
<div style="width:100%;background:yellow; clear: both; overflow: hidden;">
    <h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>