Results 1 to 4 of 4
  1. #1

    [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

  2. #2
    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

  3. #3
    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

  4. #4
    thanks for the responds guys...

    i've already achieve this using position and bottom property.

Similar Threads

  1. Make a div within a div go to the bottom?
    By DWebby in forum Web Site Reviews
    Replies: 6
    Last Post: 01-18-2011, 02:43 PM
  2. Refresh itsems in a <div> element each 10 secs
    By mikey1090 in forum Programming Discussion
    Replies: 3
    Last Post: 08-24-2006, 02:02 PM
  3. Div align at bottom
    By andren in forum Web Design and Content
    Replies: 5
    Last Post: 07-25-2006, 02:59 PM
  4. Javascript: Check all checkboxes within a div element?
    By Pheaton in forum Programming Discussion
    Replies: 2
    Last Post: 07-21-2005, 06:03 PM
  5. how to put an element at the absolute bottom of a page?
    By okok in forum Web Design and Content
    Replies: 16
    Last Post: 03-01-2005, 08:13 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •