Question
I'm getting a annoying issue and I don't how to solve this, it seems simple but I didn't figure it out. You can see the problem here:
(Ignore the testing texts and images)
And here's the code
https://stackoverflow.com/questions/22594549
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Catalogo de molduras e acessórios - Los Amigos Molduras</title>
<link href="css/lightbox.css" rel="stylesheet" />
<link rel="shortcut icon" href="img/s.ico" type="image/x-icon" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="css/styles.css" rel="stylesheet" media="all" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.quicksand.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</script>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute('charset','utf-8');
$.src='//v2.zopim.com/?1z0K8re6WlsEq76WgGj4GiHJAmYnDYQ5';z.t=+new Date;$.
type='text/javascript';e.parentNode.insertBefore($,e)})(document,'script');
</script>
<!--End of Zopim Live Chat Script-->
<script type="text/javascript">
$(document).ready(function() {
var pageTitle = document.title; //HTML page title
var pageUrl = location.href; //Location of the page
//user hovers on the share button
$('#share-wrapper li').hover(function() {
var hoverEl = $(this); //get element
//browsers with width > 699 get button slide effect
if($(window).width() > 699) {
if (hoverEl.hasClass('visible')){
hoverEl.animate({"margin-left":"-117px"}, "fast").removeClass('visible');
} else {
hoverEl.animate({"margin-left":"0px"}, "fast").addClass('visible');
}
}
});
//user clicks on a share button
$('.button-wrap').click(function(event) {
var shareName = $(this).attr('class').split(' ')[0]; //get the first class name of clicked element
switch (shareName) //switch to different links based on different social name
{
case 'facebook':
var openLink = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'twitter':
var openLink = 'http://twitter.com/home?status=' + encodeURIComponent(pageTitle + ' ' + pageUrl);
break;
case 'digg':
var openLink = 'http://www.digg.com/submit?phase=2&url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'stumbleupon':
var openLink = 'http://www.stumbleupon.com/submit?url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'delicious':
var openLink = 'http://del.icio.us/post?url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'google':
var openLink = 'https://plus.google.com/share?url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'email':
var openLink = 'mailto:?subject=' + pageTitle + '&body=Found this useful link for you : ' + pageUrl;
break;
}
//Parameters for the Popup window
winWidth = 650;
winHeight = 450;
winLeft = ($(window).width() - winWidth) / 2,
winTop = ($(window).height() - winHeight) / 2,
winOptions = 'width=' + winWidth + ',height=' + winHeight + ',top=' + winTop + ',left=' + winLeft;
//open Popup window and redirect user to share website.
window.open(openLink,'Share This Link',winOptions);
return false;
});
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
background-image:url(images/footer2.png);
position:absolute;
left:400px;
top:2072px;
width:472px;
height:356px;
z-index:1;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('.menu');
$(window).scroll(function () {
if ($(this).scrollTop() > -1) {
nav.addClass("scrolled_menu");
} else {
nav.removeClass("scrolled_menu");
}
});
});
</script>
<div id="losamigos_header_wrapper" class="menu">
<div id="share-wrapper">
<ul class="share-inner-wrp">
<!-- Facebook -->
<li class="facebook button-wrap"><a href="#">Facebook</a></li>
<!-- Twitter -->
<li class="twitter button-wrap"><a href="#">Tweet</a></li>
<!-- Google -->
<li class="google button-wrap"><a href="#">Plus Share</a></li>
<!-- Email -->
<li class="email button-wrap"><a href="#">Email</a></li>
</ul>
</div>
<div id="losamigos_header">
<div id="site_title">
<a href="index.html" target="_parent">
<img src="s.png" alt="css templates" width="44" height="50" />
<span></span>
</a>
</div>
<div id="losamigos_menu">
<ul>
<li><a href="index.html" target="_parent">Início</a></li>
<li><a href="quemsomos.html" target="_parent">Quem somos</a></li>
<li><a href="#" target="_parent">Blog</a></li>
<li><a href="#" class="current">Molduras</a></li>
<li><a href="products.php">Acessórios</a></li>
<li><a href="paineis.html">Telas e Painéis</a></li>
</ul>
</div>
</div>
</div>
<div id="losamigos_content_wrapper2">
<div id="Amigoscomponent"></div>
<div id="content">
<div id="gallerycontainer"><br />
<form action="products.php" method="post">
<table width="100%">
<tr><td align="right">
<input type="text" name="filter" value="" id="filter" placeholder="Digite o código."/>
<input type="submit" value="Pesquisar" id="search" />
</td></tr>
</table>
</form>
<div id="cute"></div>
<div id="cute2"></div>
<ul class="portfolio-area" style=" padding: 0px 0 20px 0; bottom: 50px; position:relative;">
<?php
include('db.php');
if(isset($_POST['filter']))
{
$filter = $_POST['filter'];
$result = mysql_query("SELECT * FROM products where Product like '%$filter%' or Description like '%$filter%' or Category like '%$filter%'");
}
else
{
$result = mysql_query("SELECT * FROM products");
}
while($row=mysql_fetch_assoc($result))
{
echo '<li class="portfolio-item2" data-id="id-0" data-type="cat-item-4">';
echo '<div>
<span class="image-block">
<a class="example-image-link" href="reservation/img/products/'.$row['imgUrl'].'" data-lightbox="example-set" title="'.$row['Product'].'""><img width="225" height="140" src="reservation/img/products/'.$row['imgUrl'].'" alt="'.$row['Product'].'" title="'.$row['Product'].'" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><font color="#666666">'.$row['Product'].'</font></h2>
<p class="post-subtitle-portfolio"><font color="#666666">Descrição: '.$row['Description'].'
<p class="post-subtitle-portfolio"><font color="#666666">Categoria: '.$row['Category'].'
<p class="post-subtitle-portfolio">Código: '.$row['Price'].'</p><br/></font></p>
</div>
</div>';
echo '</li>';
}
?>
<div class="column-clear"></div>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="losamigos_footer_wrapper">
<center>
<div class="cleaner_h30"></div>
<h6><font size="2"><br />Saiba mais</font></h6></center>
<div id="losamigos_footer">
<div class="footer_box">
<div class="cleaner_h40"><h6>Links</h6><br /></div>
<font color="#FFFFFF">Suporte Online Los Amigos</font><br /><br />
<font color="#FFFFFF">Webdesigner</font><br /><br />
<font color="#FFFFFF">Blog Los Amigos</font><br /><br />
<font color="#FFFFFF">Orçamentos</font><br /><br />
</div>
<div class="footer_box">
<h6>Endereços</h6>
<p><br /><h7><font size="1" face="arial">Existem atualmente duas unidades, a loja e a fábrica, que se encontram em:<br />
<br />Loja: Rua Marquês de Itu, 152 - Vila Buarque/SP<br />
Fábrica: Rua São Florêncio, 196 - Penha/SP<br /><br />
</font></h7><div id="mapa"><h6><font size="1" face="arial"><center>Ver no mapa</center></font></h6><a href="https://www.google.com.br/maps/place/Rua+Marqu%C3%AAs+de+Itu,+152+-+Vila+Buarque/@-23.5437545,-46.6458034,17z/data=!3m1!4b1!4m2!3m1!1s0x94ce584f4800d815:0x5a758bdc65ccabbb"><img src="images/maps.png" width="76" height="74" /></a> <a href="https://www.google.com.br/maps/place/Rua+S%C3%A3o+Flor%C3%AAncio,+196+-+Vila+Feliz/@-23.520112,-46.5298751,17z/data=!3m1!4b1!4m2!3m1!1s0x94ce5e30c6dd5d15:0x6739f0c9fa51f8c5"><img src="images/maps.png" width="76" height="74" /></a><br />
<h6><font size="1" face="arial"> (Loja) (Fábrica)</font></h6></div>
<p class="blog_section"><span><h7></h7><br />
</span></p>
</div>
<div class="footer_box">
<h6>Contato<br />
</h6>
<div id="fone2"><img src="images/fone.png" width="54" height="58" /></div><div id="fone" align="left"><h7><font size="1" face="arial">Tel (Loja): (11)3331-0453<br />
Tel (Fábrica): (11)2798-2278</font></h7>
</div><br /><h7><font size="1" face="arial">Encomendas de painéis personalizados por telefone devem ser feitas apenas na fábrica. Em caso de dúvidas, mande-nos um e-mail!<br /><br /> <a href="mailto:comercial@losamigosmolduras.com"><font color="#FFFFFF" >comercial@losamigosmolduras.com</font></a></font></h7>
</div><div class="footer_box">
<h6>Siga-nos</h6>
<div class="cleaner"></div>
<br />
<img src="images/facebook.png" width="79" height="75" /><img src="images/twitter.png" width="79" height="75" /><img src="images/youtube.png" width="79" height="75" /><br /><br /><h7><font size="1" face="arial">Em desenvolvimento o blog de nossa loja, trazendo todas as novidades e notícias para decorar a sua casa com estilo!<br /><br />Los amigos 1994 - 2014 Todos os direitos reservados.</font></h7></div>
<div class="cleaner"></div>
</div>
</div>
</body>
</html>
What can I do to solve this problem?
Solution
That’s a “natural” effect with floating, when you have items of different heights – your first item is slightly higher then the next two in the row, and so the first one on the next line floats under the second one of the first line.
Easiest way to solve this: Don’t float the items, but use display:inline-block;vertical-align:top instead. (Be aware though what effect this might have on whitespace between the elements.)
