hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Hosting Talk Tutorials : Web Design and Content Tutorials : [Help] - How to pull down an element at the bottom of a div
Reply

Forum Jump

[Help] - How to pull down an element at the bottom of a div

Reply Post New Thread In Web Design and Content Tutorials Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old
Junior Guru Wannabe
 
Join Date: Dec 2011
Posts: 88

[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>

__________________
Baguio Ads | My Baguio Biz


Last edited by cosmicx; 06-20-2012 at 01:11 PM. Reason: added info


Sponsored Links
  #2  
Old
Web Hosting Master
 
Join Date: Mar 2010
Location: Upstate New York
Posts: 1,273
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  
Old
Junior Guru Wannabe
 
Join Date: Jun 2012
Location: Chester, United Kingdom
Posts: 37
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

Sponsored Links
  #4  
Old
Junior Guru Wannabe
 
Join Date: Dec 2011
Posts: 88
thanks for the responds guys...

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

__________________
Baguio Ads | My Baguio Biz

Reply

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

Related posts from TheWhir.com
Title Type Date Posted
DigitalOcean: The Startup that's Shaking Up Web Hosting Web Hosting News 2014-05-09 12:40:25
Could Website Hackers be Chasing Hosting Customers Away? Blog 2013-08-27 09:07:42
Strategies to Reduce Operating Costs, Avoid Email Blacklisting and Improve Deliverability Webinars 2014-06-10 11:05:29
The Demise of Google Reader Blog 2013-03-14 13:21:34
Cloud Business Planning: Hosting, Syndication or Both, with John McMillian Web Hosting News 2013-02-05 18:48:14


Tags
align bottom, vertical align bottom

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
WHT Host Brief Email:

We respect your privacy. We will never sell, rent, or give away your address to any outside party, ever.

Advertisement:
Web Hosting News:
WHT Membership
WHT Membership



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?