Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Div tipo flutuante a direita ou a esquerda de um texto

06-04-2015 16:32

Nesse post vou mostrar como fazer um bloco div que fica na direita em um bloco de texto.

O texto vai sendo bloqueado pela div, e quando termina a div o texto continua por baixo da div.

<div style="width:500px;"> <div style="width:100px; height:400px; float:right; border:1px solid #ccc;">&nbsp;</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel nisl et arcu ullamcorper tristique ultricies vel est. Donec blandit pretium libero. Praesent pellentesque in ipsum vel hendrerit. Morbi sagittis metus nec bibendum facilisis. Donec condimentum nunc lacus, scelerisque vulputate diam aliquam non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ultrices tempor ornare. In faucibus velit a pulvinar rutrum.    Aliquam erat volutpat. Integer tristique tellus a placerat venenatis. Donec mi metus, luctus et risus et, rutrum consectetur lorem. In non turpis ipsum. Quisque eu gravida velit. Cras a vulputate lorem, vitae varius orci. Nullam in mauris id mi varius consequat eu eget diam. Fusce fermentum felis ut scelerisque mattis. Praesent quis ornare eros, bibendum suscipit elit. Donec eget euismod orci, quis porttitor eros. Morbi sodales sapien vel libero elementum, in iaculis libero posuere. Pellentesque facilisis bibendum nibh, nec hendrerit libero rutrum non. Integer porta mauris in arcu porta consectetur. Aliquam tristique, enim eu sagittis dictum, urna lorem efficitur tortor, id convallis dolor odio ac urna. Praesent at blandit sapien, quis auctor libero. Aliquam sit amet augue libero.    Ut imperdiet quis felis at venenatis. Donec vitae sapien odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in suscipit nulla. Curabitur porta, diam quis sollicitudin bibendum, magna sem vulputate turpis, quis pulvinar mauris purus sit amet ex. In odio enim, vehicula vitae lectus elementum, hendrerit pellentesque erat. Vestibulum quis eleifend tellus. Aliquam nec fermentum velit, et faucibus est. Pellentesque vitae urna at diam pellentesque tristique. In at faucibus erat, in dignissim erat. Sed nulla erat, rutrum nec volutpat a, feugiat nec libero.    Ut dictum, sapien quis commodo mollis, justo libero facilisis enim, eget dictum leo dolor at nunc. Maecenas interdum quis tortor eget lacinia. Cras lorem enim, efficitur ut orci at, lobortis tempus augue. Curabitur faucibus urna ac lectus auctor, non placerat dolor faucibus. Donec massa justo, ultrices id iaculis eget, lacinia quis diam. Praesent eu nulla quis quam tincidunt dignissim eu in nibh. Duis vel tempor ligula. Curabitur consectetur lacus vitae bibendum rutrum. Mauris elementum enim sit amet faucibus pretium. Cras viverra id dolor a cursus. Duis sed pharetra metus. Nulla sit amet facilisis turpis.    Nullam vel felis in sapien dictum fringilla. Aenean et turpis eu eros interdum dignissim a et purus. Sed feugiat urna eget felis imperdiet malesuada. Vivamus vel diam gravida augue ultrices accumsan maximus vitae elit. Donec non dictum nisl. Nam ut ullamcorper est. Donec feugiat et elit eget aliquet. In interdum sapien eget varius accumsan. Vivamus vulputate egestas enim id interdum. Vivamus aliquet faucibus nunc, dapibus tincidunt quam volutpat sed. Morbi sed urna eu lacus ullamcorper sagittis vel non nibh. Donec sed urna ut ex efficitur congue sit amet eget dui. Vestibulum vel augue dui.  </div>

Também é possível usar o valor left para o float da div interna para que o texto seja preenchido pela direta e por baixo da div.

E para dar uma distância entre a div interna e o texto, usa-se o margin.
Para isso, adicione o margin dentro da div interna, por exemplo:

margin:5px 5px;
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado