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

cosmicx · Share | #1 (**permalink**) 06-20-2012, 10:13 AM

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>

JohnnyS · #2 (**permalink**) 06-21-2012, 01:17 AM

you can add this to your css..

Code:

.blockContent { position:relative; }
.buttonGallery { position:absolute; bottom:0; }

cosmicx · #3 (**permalink**) 06-27-2012, 08:18 PM

@JohnnyS

thanks man... that helped a lot. i've just added my own adjustments.