07-04-2012, 06:49 AM
|
#1 |
|
Registered User
Join Date: Jul 2012
Posts: 8
|
Help on pulling down an element inside 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/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" 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"><!--BLOCK 2-->
<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; 07-04-2012 at 06:50 AM.. Reason: added an info, html code |
|
|
|
07-12-2012, 02:58 AM
|
#2 |
|
Registered User
Join Date: Jul 2012
Posts: 111
|
You can use display:block; for this cases.
|
|
|
|
 |
«
Previous Thread
|
Next Thread
»
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
Linear Mode
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Have you ever wondered what is inside a java class file? | cianfie | Java | 6 | 01-28-2015 11:09 PM |
| Pulling information from MySQL and filling fields in a PDF | mjvndhsb | PHP / mySQL | 0 | 10-28-2011 09:23 PM |
All times are GMT -7. The time now is 05:48 AM.