[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 300
  • Last Modified:

CSS position element on the bottom

How do I get the boxes that are above the slider images to position on the bottom.  See small box on this page (poetry contest) http://new.nealagency.ca/
0
livewirewebsolutions
Asked:
livewirewebsolutions
  • 4
  • 4
1 Solution
 
GaryCommented:
Not sure what you mean - there are no boxes above the slider.
0
 
livewirewebsolutionsAuthor Commented:
There are 4 white boxes in the slider.  I have reduced the size of the far left box but I need it to bottom align where the others align.
0
 
GaryCommented:
You would need to add
.row .span3 {
    height: 405px;
    position: relative;
}
.row .span3 .service-box {
    bottom: 0;
    position: absolute;
}

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
livewirewebsolutionsAuthor Commented:
It worked but it pushed the boxes up about 40px.
0
 
livewirewebsolutionsAuthor Commented:
i just  fixed it by increasing the height.  Is that ok?
0
 
GaryCommented:
I'd reduce the height unless you are planning to put something between them and the slider.
0
 
livewirewebsolutionsAuthor Commented:
Where am I reducing the height?
0
 
GaryCommented:
Maybe I'm not understanding the logic behind what you are doing.
If the boxes are all going to be the same height why do you need to make sure they are at the bottom of the container?
0
 
Kyle HamiltonData ScientistCommented:
main-style.css line 659 is pushing your boxes up
.home .service-box { margin-bottom:87px; }
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now