Results 1 to 4 of 4
-
06-20-2012, 01:10 PM #1Junior Guru Wannabe
- Join Date
- Dec 2011
- Posts
- 90
[Help] - How to pull down an element at the bottom of a div
hello gurus,
im learning html/css on my own, and now i've encountered some issues that I can't seem to find a solution for it.
i've created a 6 blocks div inside a div wrapper, each block inside the wrapper is fluid.
my problem is, i cant pull down the "View Gallery" Button, inside BLOCK B. Block B has shorter text content than the rest of the blocks. and I want to pull down the view gallery button, so that i will be aligned at the bottom.
anyone?
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w3.org/1999/" xml:lang="en" lang="en"> <head> <title>Pull Down An Element Inside a Div</title> <style type="text/css"> .mainBody { position: relative; margin-top: 40px; margin-bottom: 40px; overflow: hidden; } .mainContent { max-width: 100%; float: left; overflow: hidden; overflow: hidden; background: white; position: relative; } .sideContent { max-width: 35%; float: left; overflow: hidden; } .blocks { float: left; max-width: 33.333333333333333333333333333333%; overflow: hidden; background: none; position: relative; } .blockContent { positon: relative; padding: 20px; margin: 10px; border: 1px solid #ccc; } h3.blocksHeader-text { font: 1.5em/.10em "Open Sans",Tahoma,Helvetica,Verdana,Sans-serif,sans; color: #666; padding: 10px 0 20px 0; } .blockImage { padding: 0; margin: 0 0 20px 0; max-width: 279px; background: #ccc; border: 2px solid #fff; -webkit-box-shadow: 1px 1px 7px 1px ; box-shadow: 1px 1px 7px 1px ; } .buttonGallery { font-family: "Open Sans", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #ffffff; padding: 10px 20px; margin-top: 20px; width: 100%; background: -moz-linear-gradient( top, #008000 0%, #008000 25%, #008000 50%, #36c736 92%, #008000); background: -webkit-gradient( linear, left top, left bottom, from(#008000), color-stop(0.25, #008000), color-stop(0.50, #008000), color-stop(0.92, #36c736), to(#008000)); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 2px solid #d6ebd6; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,1), inset 0px 0px 10px rgba(087,087,087,0.7); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,1), inset 0px 0px 10px rgba(087,087,087,0.7); text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3); } a.button { color: #fff; text-decoration: none !important; } span.button { color: #fff; font-size: 1.2em; text-decoration: none; } .buttonGallery:hover { cursor: pointer; background: -moz-linear-gradient( top, #008000 0%, #008000 60%, #008000 50%, #36c736 99%, #008000); background: -webkit-gradient( linear, left top, left bottom, from(#008000), color-stop(0.60, #008000), color-stop(0.50, #008000), color-stop(0.99, #36c736), to(#008000)); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 2px solid #d6ebd6; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,1), inset 0px 0px 10px rgba(087,087,087,0.7); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,1), inset 0px 0px 10px rgba(087,087,087,0.7); text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3); } </style> </head> <body> <div class="wrapper mainBody"><!--Contents Start--> <div class="mainContent roundedCorners"> <div class="blocks"> <div class="blockContent"> <p>Lorem ipsum dolor sit amet consectetuer tempus ipsum aliquet penatibus Morbi. Neque nibh quis magna Nulla cursus pellentesque odio faucibus pellentesque Ut. Sapien Fusce tortor In aliquet mi porta lacus tempor Pellentesque Nullam. Nibh Morbi auctor fringilla congue eleifend ut ipsum at laoreet lacinia. Scelerisque id justo Sed adipiscing Nam wisi quis tempor sagittis hendrerit. </p> <a class="button" href="#"> <button class="buttonGallery" type="button" value="View Gallery" name="viewGallery"> <span class="button">View Gallery</span> </button></a> </div> </div> <div class="blocks"> <div class="blockContent"> <h3>Block 2</h3> <p>Lorem ipsum dolor sit amet consectetuer tempus ipsum aliquet penatibus Morbi. Neque nibh quis magna Nulla cursus pellentesque odio faucibus pellentesque Ut. </p> <a class="button" href="#"> <button class="buttonGallery" type="button" value="View Gallery" name="viewGallery"> <span class="button">View Gallery</span> </button></a> </div> </div> <div class="blocks"> <div class="blockContent"> <p>Lorem ipsum dolor sit amet consectetuer tempus ipsum aliquet penatibus Morbi. Neque nibh quis magna Nulla cursus pellentesque odio faucibus pellentesque Ut. Sapien Fusce tortor In aliquet mi porta lacus tempor Pellentesque Nullam. Nibh Morbi auctor fringilla congue eleifend ut ipsum at laoreet lacinia. Scelerisque id justo Sed adipiscing Nam wisi quis tempor sagittis hendrerit. </p> <a class="button" href="#"> <button class="buttonGallery" type="button" value="View Gallery" name="viewGallery"> <span class="button">View Gallery</span> </button></a> </div> </div> <div class="blocks"> <div class="blockContent"> <p>Lorem ipsum dolor sit amet consectetuer tempus ipsum aliquet penatibus Morbi. Neque nibh quis magna Nulla cursus pellentesque odio faucibus pellentesque Ut. Sapien Fusce tortor In aliquet mi porta lacus tempor Pellentesque Nullam. Nibh Morbi auctor fringilla congue eleifend ut ipsum at laoreet lacinia. Scelerisque id justo Sed adipiscing Nam wisi quis tempor sagittis hendrerit. </p> <a class="button" href="#"> <button class="buttonGallery" type="button" value="View Gallery" name="viewGallery"> <span class="button">View Gallery</span> </button></a> </div> </div> <div class="blocks"> <div class="blockContent"> <p>Lorem ipsum dolor sit amet consectetuer tempus ipsum aliquet penatibus Morbi. Neque nibh quis magna Nulla cursus pellentesque odio faucibus pellentesque Ut. Sapien Fusce tortor In aliquet mi porta lacus tempor Pellentesque Nullam. Nibh Morbi auctor fringilla congue eleifend ut ipsum at laoreet lacinia. Scelerisque id justo Sed adipiscing Nam wisi quis tempor sagittis hendrerit. </p> <a class="button" href="#"> <button class="buttonGallery" type="button" value="View Gallery" name="viewGallery"> <span class="button">View Gallery</span> </button></a> </div> </div> <div class="blocks"> <div class="blockContent"> <p>Lorem ipsum dolor sit amet consectetuer tempus ipsum aliquet penatibus Morbi. Neque nibh quis magna Nulla cursus pellentesque odio faucibus pellentesque Ut. Sapien Fusce tortor In aliquet mi porta lacus tempor Pellentesque Nullam. Nibh Morbi auctor fringilla congue eleifend ut ipsum at laoreet lacinia. Scelerisque id justo Sed adipiscing Nam wisi quis tempor sagittis hendrerit. </p> <a class="button" href="#"> <button class="buttonGallery" type="button" value="View Gallery" name="viewGallery"> <span class="button">View Gallery</span> </button></a> </div> </div> </div> </div> </div><!--Contents End--> </body> </html>
Last edited by cosmicx; 06-20-2012 at 01:11 PM. Reason: added info
$5 VPS |
-
06-21-2012, 10:04 AM #2Web Hosting Master
- Join Date
- Mar 2010
- Location
- Upstate New York
- Posts
- 1,452
What browser are you viewing it in?
Is the problem the same no matter the browser type?████ John Rasri
████ Private Label Live Chat Provider For Resellers
████ GotLiveChat.com
████ White Label/Brand-able live chat software solutions
-
06-21-2012, 11:08 AM #3Junior Guru Wannabe
- Join Date
- Jun 2012
- Location
- Chester, United Kingdom
- Posts
- 46
Is the use of Margins, Padding etc not able to achieve this?
Phil G | Technical Support
█ Cyber Host Pro Ltd - over 10 years in the UK hosting industry.
█ Website Hosting | Reseller Hosting | Cloud VPS Servers | Dedicated Servers
www.cyberhostpro.com - UK Call Centre + 24x7 Online Chat
-
06-22-2012, 09:02 AM #4Junior Guru Wannabe
- Join Date
- Dec 2011
- Posts
- 90
thanks for the responds guys...
i've already achieve this using position and bottom property.$5 VPS |
Similar Threads
-
Make a div within a div go to the bottom?
By DWebby in forum Web Site ReviewsReplies: 6Last Post: 01-18-2011, 02:43 PM -
Refresh itsems in a <div> element each 10 secs
By mikey1090 in forum Programming DiscussionReplies: 3Last Post: 08-24-2006, 02:02 PM -
Div align at bottom
By andren in forum Web Design and ContentReplies: 5Last Post: 07-25-2006, 02:59 PM -
Javascript: Check all checkboxes within a div element?
By Pheaton in forum Programming DiscussionReplies: 2Last Post: 07-21-2005, 06:03 PM -
how to put an element at the absolute bottom of a page?
By okok in forum Web Design and ContentReplies: 16Last Post: 03-01-2005, 08:13 PM