Databases
StackOverflow2013
Postsdbo
POdiv information overlapping. should be bottom of its container
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdiv information overlapping. should be bottom of its container
    text
    copied!<p>I have created a class called "category-product-info" which contains each of my sites product information (title, price, add to basket button). each product is in its own container which can clearly be seen. (id="product").</p> <p>now I have put the following code into the category-product-info class to get everything to be positioned at the bottom of each container:</p> <p>position: absolute; bottom: 0;</p> <p>but if you have a look at the page right now it overlaps All of the product info on top of each other, i'll try keep the page as is while I work on it so you can see. included the code below too..</p> <p><a href="http://bit.ly/1hfvCvH" rel="nofollow">http://bit.ly/1hfvCvH</a></p> <p>HTML</p> <pre><code>&lt;div class="span3"&gt; &lt;div id="product"&gt; &lt;div class="product-select &lt;?=$counter;?&gt;"&gt; &lt;!-- ENABLE FOR TRIANGLES ON PRODUCT IMAGES --&gt; &lt;!-- &lt;div class='triangle-container'&gt;&lt;div class='triangle'&gt;&lt;p&gt;NEW!&lt;/p&gt;&lt;/div&gt;&lt;/div&gt; --&gt; &lt;?php if ($row_rsCatalogue['fileId']){ ?&gt; &lt;div class="product-image"&gt; &lt;a href="&lt;?php echo HTTP_HOST.'Product/'.($catRoot?$catRoot:'').$row_rsCatalogue['pageName']; ?&gt;"&gt; &lt;img style="&lt;?=$img_ratio;?&gt;" src="&lt;?php echo HTTP_HOST.'upload/340w/'.$row_rsCatalogue['fileId'].'_'.$row_rsCatalogue['fileName']; ?&gt;" alt="&lt;?php echo (($row_rsCatalogue['metaKey'].' - '.$row_rsCatalogue['pageTitle'])); ?&gt;" /&gt; &lt;/a&gt; &lt;/div&gt; &lt;?php } ?&gt; &lt;div class="category-product-info"&gt; &lt;div class="product-title"&gt;&lt;a href="&lt;?php echo HTTP_HOST.'Product/'.$catRoot.''.$row_rsCatalogue['pageName']; ?&gt;"&gt;&lt;?php echo ($row_rsCatalogue['pageTitle']); ?&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="price"&gt;&lt;p&gt;&lt;i&gt;&amp;nbsp;&amp;nbsp;&lt;br /&gt; &lt;/i&gt; &amp;pound;&lt;?php echo number_format(($catalogue-&gt;output_row_price($user)),2); ?&gt;&lt;/p&gt;&lt;/div&gt; &lt;!--div class="price"&gt;&lt;p&gt;&lt;i&gt;from&lt;br /&gt;only&lt;/i&gt; &amp;pound;&lt;?php echo number_format(($catalogue-&gt;output_row_price($user))*($site-&gt;row['vatRate']/100+1),2); ?&gt;&lt;/p&gt;&lt;/div--&gt; &lt;a href="&lt;?php echo HTTP_HOST.'Product/'.($catRoot?$catRoot:'').$row_rsCatalogue['pageName']; ?&gt;"&gt; &lt;img src="&lt;?=HTTP_HOST;?&gt;img/addtocart.jpg" /&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>#products { width: auto; display: block; } #product-container { margin-bottom: 20px; } #product { text-align: center; border: 1px solid #eee; margin-bottom: 20px; padding: 10px; min-height: 350px; } #product:hover { background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f8f8f8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f8f8f8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f8f8f8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f8f8f8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f8f8f8 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#f8f8f8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */ } .price { font-weight: bold; font-size: 1.3em; } .category-product-info { bottom: 0; position: absolute; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload