Como posicionar um iframe dentro de uma DIV usando CSS

Posicionando um iframe dentro de uma DIV com CSS

No mundo do desenvolvimento web, às vezes nos encontramos com cenários onde precisamos posicionar um elemento dentro de outro. No artigo de hoje, vou mostrar como posicionar um iframe dentro de uma div usando CSS.

Primeiro, vamos entender o que são divs e iframes:

• Divs são recipientes usados para agrupar blocos de código em HTML. São elementos muito úteis quando se quer aplicar estilos específicos a certas seções de seu site.
• Iframes permitem que você incruste outro documento HTML dentro do seu documento atual. Isso pode ser muito útil para incorporar conteúdo de terceiros, como vídeos do YouTube, mapas ou qualquer outro site.

Agora, vamos começar com o código. Primeiro, precisamos criar nossa div e o iframe que queremos posicionar. No HTML, isso seria algo assim:

Pessoal essa é uma dica rapida de como colocar uma página dentro de um iframe com o uso de CSS.

O primeiro trecho de codigo é do iframe que ficará dentro da div.
#frameInterno
{
height:1080px;
top:-292px;
position:absolute;
width:1160px;
left:-298px;
}

O segundo trecho de código ficará na parte externa e vai receber a div:
#divExterna
{
overflow:hidden;
width:326px;
position:relative;
height:126px;

}

Agora temos o codigo juntando o iframe interno junto com a div:
<div id=’divExterna’>
<iframe  id=’frameInterno’ scrolling='no'  src=”http://www.gooogle.com.br/” ></iframe>
</div>

Qualquer duvida posta nos comentarios para que possamos te ajudar.