Databases
StackOverflow2013
Postsdbo
POHaving trouble with bottom aligning
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHaving trouble with bottom aligning
    primarykey
    data
    text
    <p>I'm trying to get the items on one of my pages to line up at the bottom. The realworld example is <a href="http://www.silverartcollector.com" rel="nofollow">http://www.silverartcollector.com</a>. You can see on the main page the content area, there are 2 product boxes that have different size images which will be common. I want the bottoms to align so it will look neater. I've tried doing vertical-align:bottom on my main class but it doesn't work, I'm presuming because of the float:left. However, after hours of testing, I can't figure it out. I appreciate any input/help.</p> <p>Here is the page code:</p> <pre><code>&lt;div class="float_r" id="content"&gt; &lt;h3&gt;Recent Additions&lt;/h3&gt;&lt;br&gt; &lt;div class="product_box"&gt; &lt;a href="productdetail.php?id=1"&gt;&lt;img width="150" src="admin/uploads/ONE-7 O.JPG"&gt;&lt;/a&gt; &lt;h3&gt;Huck Finn&lt;/h3&gt; &lt;p class="product_price"&gt;One Mint&lt;/p&gt; &lt;!--&lt;a href="#" class="add_to_card"&gt;ONE-7&lt;/a&gt;&lt;br/&gt;--&gt; &lt;a class="detail" href="productdetail.php?id=1"&gt;Details&lt;/a&gt; &lt;/div&gt; &lt;div class="product_box"&gt; &lt;a href="productdetail.php?id=20"&gt;&lt;img width="150" src="admin/uploads/MLM-11 O.jpg"&gt;&lt;/a&gt; &lt;h3&gt;Keep Me &amp;amp; Never Go Broke&lt;/h3&gt; &lt;p class="product_price"&gt;Mother Lode Mint&lt;/p&gt; &lt;!--&lt;a href="#" class="add_to_card"&gt;MLM-11&lt;/a&gt;&lt;br/&gt;--&gt; &lt;a class="detail" href="productdetail.php?id=20"&gt;Details&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And here is the stylesheet:</p> <pre><code>/* Credit: http://www.templatemo.com */ body { margin: 0; padding: 0; color: #999; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; line-height: 1.4em; background-color: #2e2e2e; background-repeat: repeat; background-image: url(../images/templatemo_body.jpg) } a, a:link, a:visited { color: #08aee3; font-weight: normal; text-decoration: none; } a:hover { text-decoration: underline; } a.more { display: inline-block; width: 80px; height: 28px; line-height: 28px; text-align: center; font-size: 10px; font-weight: bold; color: #21bdd0; background: url(../images/more_but.jpg); } a.more:hover { background: #333; text-decoration: none; } p { margin: 0 0 10px 0; padding: 0; } img { border: none; } blockquote { border: 1px solid #ccc; border-left: 5px solid #000; padding: 19px; margin: 20px 0 0 0; } cite a, cite a:link, cite a:visited { font-size: 12px; text-decoration: none; font-style: normal; } cite span { font-weight: 400; color: #333; } .templatemo_list { margin: 10px 0 10px 15px; padding: 0; list-style: none; } .templatemo_list li { color:#636363; margin: 0 0 5px 0; padding: 0 0 0 15px; background: url(../images/templatemo_list.png) no-repeat scroll 0 7px; } .templatemo_list li a { color: #636363; font-weight: normal; } .templatemo_list li a:hover { color: #000; } h1, h2, h3, h4, h5, h6, h7, h8{ color: #333; font-weight: normal; } h1 { font-size: 30px; margin: 0 0 30px; padding: 5px 0; } h2 { font-size: 26px; margin: 0 0 25px; padding: 5px 0; } h3 { font-size: 20px; margin: 0 0 20px; padding: 0; } h4 { font-size: 16px; margin: 0 0 15px; padding: 0; } h5 { font-size: 14px; margin: 0 0 10px; padding: 0; } h6 { font-size: 12px; margin: 0 0 5px; padding: 0; } h7 { font-size: 16px; margin: 0 0 15px; padding: 0; line-height:150% } h8 { line-height:150%; font-size: 14px; margin: 0 0 15px; padding: 0; color: white; } .cleaner { clear: both } .h10 { height: 10px } .h20 { height: 20px } .h30 { height: 30px } .h40 { height: 40px } .h50 { height: 50px } .float_l { float: left } .float_r { float: right } #templatemo_wrapper { width: 960px; margin: 0 auto; padding: 0 10px 10px; } #templatemo_header { width: 100%; padding: 50px 0 10px; } #templatemo_menu { width: 100%; height: 77px; margin-bottom: 3px; background: url(../images/templatemo_menu.jpg) repeat-x } #templatemo_middle { width: 100%; height: 200px; margin-bottom: 3px; padding-bottom: 2px; background: #fff url(../images/templatemo_middle.jpg) repeat-x bottom } #templatemo_main { width: 100%; margin-bottom: 10px; } #content { width: 680px; background: #ffffff; border: 1px solid #fff; padding: 15px; } #sidebar { width: 240px } #templatemo_footer { width: 960px; text-align: center; padding: 9px 0px; background: #121212; border: 1px solid #3a3a3a } #site_title { float: left; } #site_title h1 { margin: 0; padding: 0; } #site_title h1 a { display: block; width: 300px; height: 20px; font-size: 12px; text-indent: -10000px; color: #999; text-align: left; background: url(../images/logo.gif) no-repeat top left; } #header_right { float: right; margin-top: 5px; } #header_right a { color: #ccc; } #menu_second_bar { padding: 5px 10px; } #top_shopping_cart { float: left; padding: 5px 0; font-size: 11px; } #templatemo_search { float: right; } #templatemo_search form { margin: 0; padding: 0; } #templatemo_search .txt_field { float: left; display: block; margin-right: 5px; height: 24px; line-height: 24px; width: 300px; color: #999; font-size: 12px; padding: 0 5px; font-variant: normal; border: 1px solid #666; background: #333; } #templatemo_search .sub_btn { float: right; display: block; color: #fff; height: 26px; font-size: 11px; font-weight: 700; line-height: 26px; cursor: pointer; border: 1px solid #333; background: #0ec4f7; } .sidebar_box { position: relative; background: #4c4a4a; margin-bottom: 20px; } .sidebar_box h3 { font-size: 14px; font-weight: 700; padding: 10px; width: 220px; height: 20px; margin-bottom: 0; background: url(../images/templatemo_sidebar_header.jpg) no-repeat; color: #999 } .sidebar_box span.bottom { position: absolute; bottom: -26px; left: 0; width: 240px; height: 26px; background: url(../images/templatemo_sidebar_bottom.jpg) } #sidebar .sidebar_box .content { padding: 10px 10px 0; } #sidebar .sidebar_list { margin: 0; padding: 0; list-style: none; } #sidebar .sidebar_list li { display: block; margin: 0; padding: 3px 0; border-top: 1px solid #595858; border-bottom: 1px solid #343434; } #sidebar .sidebar_list li.first { border-top: none; } #sidebar .sidebar_list li.last { border-bottom: none; } #sidebar .sidebar_list li a { color: #d6d3d3; } #sidebar .sidebar_list li a:hover { color: #fff; text-decoration: none; } .bs_box { clear: both; margin-bottom: 20px } .bs_box img { float: left; margin-right: 10px; border: 4px solid #3d3d3d } .bs_box h4 { margin-bottom: 0 } .bs_box h4 a { font-size: 12px; color: #08aee3; font-weight: 700} .bs_box .price { font-size: 12px; font-weight: 700; color: #fff } .product_box { float: left; width: 225px; text-align: center; margin: 0 0px 0px 0; } .product_box img { margin-bottom: 5px; } .product_box h3 { font-size: 11px; color: #000; font-weight: 700; margin-bottom: 10px; } .product_box .product_price { color: #8fb410; font-size: 14px; font-weight: 700; } .product_box .add_to_card { float:left; display: block; width: 140px; height: 28px; line-height: 28px; text-align: center; color: #fff; background: url(../images/add_to_cart.jpg); margin-left: 42.5px; } .product_box .detail { float: left; display: block; width: 140px; height: 28px; line-height: 28px; text-align: center; background: url(../images/detail.jpg); margin-left: 42.5px; } .checkout input { border: 1px solid #ccc; margin-bottom: 15px; padding: 5px; } #contact_form { padding: 0; width: 312px; margin-bottom: 40px; } #contact_form form { margin: 0px; padding: 0px; } #contact_form form .input_field { width: 300px; padding: 5px; color: #222; background: #fff; border: 1px solid #dedede; font-size: 12px; font-family: Tahoma, Geneva, sans-serif; margin-top: 5px; } #contact_form form label { display: block; width: 100px; margin-right: 12px; font-size: 13px; } #contact_form form textarea { width: 300px; height: 200px; padding: 5px; color: #222; background: #fff; border: 1px solid #dedede; font-size: 12px; font-family: Tahoma, Geneva, sans-serif; margin-top: 5px; } #contact_form form .submit_btn { padding: 5px 12px; background-color: #000; border: 1px solid #fff; color: #fff; font-size:14px; margin: 10px 0px; } .faq h3 { font-size: 14px; margin: 30px 0 5px } .content_half { width: 320px; } .content_13 { width: 220px; margin-right: 10px; } .no_margin_right { margin-right: 0; } #templatemo_footer { color: #707070; } #templatemo_footer a { color: #999; } .question { position:relative; display: inline-block; text-align:center; left:-1em; top:-5em; padding: 10px 0px 0px 0px; width: 174px; height: 58px; color:black; font-weight:bold; font-size: 13px; line-height: 1.3em; background: url('../admin/images/bubble.png') left top no-repeat; opacity:0; z-index:1; } .yes{ margin-top: .5em; margin-right: .5em; cursor: pointer; display: inline-block; width: 63px; height: 21px; color: #434d17; text-shadow: 0px 1px 0px #fff; background: url('../admin/images/buttony.png') left top no-repeat; } .cancel { margin-top: .5em; margin-right: .5em; cursor: pointer; display: inline-block; width: 63px; height: 21px; color: #fff; text-shadow: 0px 1px 0px #000; background: url('../admin/images/buttonn.png') left top no-repeat; } .mint_box { float: left; width: 300px; text-align: left; margin: 0 10px 10px 0; } } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USxpy
    1. USTony Crouch
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHaving trouble with bottom aligning
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COWhy is this tagged with PHP? Do you realize that PHP is server-side language?
      singulars
      1. POHaving trouble with bottom aligning
      1. USYour Common Sense
    2. CO[**Please, don't use `mysql_*` functions in new code**](http://bit.ly/phpmsql). They are no longer maintained [and are officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). See the [**red box**](http://j.mp/Te9zIL)? Learn about [*prepared statements*](http://j.mp/T9hLWi) instead, and use [PDO](http://php.net/pdo) or [MySQLi](http://php.net/mysqli) - [this article](http://j.mp/QEx8IB) will help you decide which. If you choose PDO, [here is a good tutorial](http://j.mp/PoWehJ).
      singulars
      1. POHaving trouble with bottom aligning
      1. USj0k
    3. COThis is a shopping cart script that someone converted for my site, then using my limited php/mysql knowledge I have, I am trying to fine tune it so that I am not paying them for every little change. So to answer your question common sense, I don't know, that's just the way the code was delivered to me. j0k...I didn't realize the mysql_* had been deprecated. After a little research I see what you are talking about. I guess I will put that on my list of things to try and fix.
      singulars
      1. POHaving trouble with bottom aligning
      1. USTony Crouch
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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