Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Placement of buttons in a group of DIVS

I'm trying to set up my own page where I can practice some JavaScript DOM Scripting... but I'm distracted by something.

I'm setting up 3 DIV areas... but I'd like the button element in each one to rest along the bottom of each space no matter how big this is.

'DOM'

I thought I could do this with vertical-align or simply setting a minimum height inside the div areas but I'm out of ideas.

<div class="container"> 

                <hr />

                <p id="hide">Now You See Me!</p>                

                <p class="changeLineHeight">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab delectus aliquid illo nostrum libero explicabo obcaecati voluptatem voluptate in facilis sed at eveniet consectetur vel, magnam ipsa magni, autem illum? Ab delectus aliquid illo nostrum libero explicabo obcaecati voluptatem sed at eveniet consectetur.</p>

                <div class="btn_group">
                    <button>Left</button> <button>Center</button> <button>Right</button>
                </div>

                <p></p>

                <section>

                    <div class="area areaOne">

                        <ul class="areaOneList">
                            <li>One</li>
                            <li>Two</li>
                            <li>Three</li>
                        </ul>

                        <input type="button" class="areaOne_btn" value="Add Item!" />                        

                    </div>

                    <div class="area areaTwo">

                        <input type="text" id="" class="" />

                        <p>Click me to change Text.</p>        

                        <input type="button" class="areaTwo_btn" value="Click Me!" />

                    </div>           

                    <div class="area areaThree">

                        <ul class="areaThreeList">
                            <li>One</li>
                            <li>Two</li>
                            <li>Three</li>
                        </ul>

                        <input type="button" class="areaThree_btn" value="Iterate" />

                    </div>

                </section>
            </div>
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Grid did cross my mind! :-)

So I'll have to completely change my approach to achieve that effect then? I'm sure I've seen it done before using standard layout.

Thanks for your suggestion!

Luc de Brouwer
.a{fill-rule:evenodd;}techdegree
Luc de Brouwer
Full Stack JavaScript Techdegree Student 17,939 Points

In a bootstrap approach, you'd say something like this :

<div class="row">
 <div class="col-lg-4">
  <input type="button" class="align-bottom"/>
</div>
</div>
 <div class="col-lg-4">
  <input type="button" class="align-bottom"/>
</div>
 <div class="col-lg-4">
  <input type="button" class="align-bottom"/>
</div>
</div>

I guess https://v4-alpha.getbootstrap.com/utilities/vertical-align/

2 Answers

Luc de Brouwer
.a{fill-rule:evenodd;}techdegree
Luc de Brouwer
Full Stack JavaScript Techdegree Student 17,939 Points

How about using CSS grid? https://css-tricks.com/snippets/css/complete-guide-grid/

else I'd suggest considering bootstrap.

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

CSS Grid: You can set the btn by col and row then use the align-self: end; prop, this is align the btn at the bottom of the grid.

Second option is to absolutely position the item.

Third flexbox: flex-direction column; then on the flex item justify-content: flex-end.

that's all that I can think of at the moment.