8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

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

by cosmicx
6 replies
  • WEB DESIGN
    • |
hello gurus,


my first ever post here in warrior forum.

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?

please see my codes

Code:
<html xmlns="#" 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>
#bottom #div #element #pull
  • Profile picture of the author ronc0011
    I'm sorry but after the first five minutes watching that code scroll past I gave up looking for what may have been giving you trouble

    Offhand I would suggest putting your button in a div or styling the <a> or <img> tag in your stylesheet try using a float and adding appropriate margins to center

    NOTE: if you give it equal left and right margins it will center or make both "auto".
    {{ DiscussionBoard.errors[6525598].message }}
  • Profile picture of the author SteveJohnson
    I didn't dig through your code either, but it sounds like you're trying to make block B match the height of one or more of the other containers, and that just isn't possible.

    If you just want to send the button to the bottom of its container, you'll have to pad the bottom of the container and set its position to 'relative', then set the button to display:block, set its position to absolute, the 'bottom' property to the distance you want the button to be from the bottom of the container, and left/right margins to auto.

    Code:
    blockB {
 position: relative;
 padding-bottom: *button height + extra*;
}
button {
 position: absolute;
 bottom: 5px;
 width: *button width*;
 margin-left: auto;
 margin-right: auto;
 display: block;
}
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[6525917].message }}
  • Profile picture of the author cosmicx
    thanks you all for the answers, but i have not tried the codes yet.

    i want to explain further, about what im trying to accomplish. please have a look again at my codes.
    {{ DiscussionBoard.errors[6532179].message }}
    • Profile picture of the author jamaks
      Hi cosmicx, you certainly set a challenge. Firstly you need a proper doctype declaration to have any hope of making it display correctly, and you must also name your divisions exactly the same as shown in the CSS. <div class="wrapper mainBody"> will not correspond to .mainBody. Getting somewhere near what I believe you require but a sketch of what you hope to end up with would be helpful.

      Regards. Jim

      The best solution I can see for your case is the introduction of an additional div. You would insert your text into the new div which is contained inside the original.

      <div class="blocks">
      <div class="blockcontent">
      <div class="pad">
      <p>Lorem ipsum dolor sit amet consectetuer tempus ipsum aliquet penatibus Morbi.</p>
      </div>
      <a class="button" href="#">
      <button class="buttonGallery" type="button" value="View Gallery" name="viewGallery">
      <span class="button">View Gallery</span></button></a>
      </div>
      </div>

      CSS would read, for the example given: .pad{width:100%;height:240px;} (adjust to suit)
      {{ DiscussionBoard.errors[6542075].message }}
  • Profile picture of the author lsargent
    It's a lot easier to "visually" see what's going on with the site. If you can post a link to the page, people here could look at it, and we can look at the source code and css file ourselves and be able to help you out a lot quicker and with clearer instructions.
    {{ DiscussionBoard.errors[6542526].message }}
  • Profile picture of the author cosmicx
    @Logan Sargent

    the thing is, i don't have a website/webserver yet.

    but if you download the zipped file that i've posted, unzip it and open the html file, you'll see what im trying to explain.

    @jamaks

    hey... that worked man! thanks a lot. i've just adjusted the height to match the height of the other blocks.

    neat trick!
    {{ DiscussionBoard.errors[6546888].message }}

Trending Topics