CODEWITHSUNDEEP
htmlcss
marmistrz
marmistrz

Reputation: 6404

Align an element to the bottom of the parent and center

I created a responsive webpage, with a styled ul selector to provide a multipane view.

<ul class="threepane">
    <li>
        <h3>Section 1</h3>
        <p>Foo <br /> bar <br /> baz </p>
        <a href="x.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 2</h3>
        <p>Foo <br/> bar </p>
        <a href="y.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 3</h3>
        <p>Foo</p>
        <a href="z.html" class="button">More</a>
    </li>
</ul>

I won't post the whole styling right now so as not to clutter the post. Let me know if I should do it. This looks like that right now:

current page

The only problem is the positioning of the buttons - I'd like them to be at one height. So I added this selectors to my styles

#about {
    position: relative; 
}

 #about .button {
      position: absolute;
      bottom: 0; 
 }

Unfortunately, now the buttons aren't centered (the left border of the button is in the center of the pane). And of course, if the panes come to display one above another, all buttons are displayed in the same place.

On the other hand, if I change the #about selector to #about ul or #about li, the ul block shrinks and the buttons are aligned too high.

All I want is: all buttons should be in one row with the button most close to the bottom. In this case: align height of the second and third button to the first button (but I don't want to hardcode that the first pane is the longest)

How can I achieve it?

Upvotes: 1

Views: 197

Answers (4)

Paulie_D
Paulie_D

Reputation: 115288

Flexbox can do that without positioning anything.

.threepane {
  display: flex;
  margin: 0;
}
li {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
  padding: 1em;
}
li a {
  margin-top: auto;
  align-self: center;
}
<ul class="threepane">
  <li>
    <h3>Section 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae dolor laboriosam modi ab inventore voluptatum labore quae reiciendis odit totam cum alias quidem minima obcaecati atque ip.</p>
    <a href="x.html" class="button">More</a>
  </li>
  <li>
    <h3>Section 2</h3>
    <p>Foo
      <br/>bar</p>
    <a href="y.html" class="button">More</a>
  </li>
  <li>
    <h3>Section 3</h3>
    <p>Foo</p>
    <a href="z.html" class="button">More</a>
  </li>
</ul>

Upvotes: 1

Rahul Malu
Rahul Malu

Reputation: 566

Try this:

<style>
li{
position:relative;
text-align:center;
display: inline-block;
height: 150px;
overflow-y: auto;
}

li p{
display:block;
width:100px;
height:100px;
overflow: auto;
}

li .button{
position: absolute;
bottom:0;
margin: 0 auto;
}

Upvotes: 1

Clyde Lobo
Clyde Lobo

Reputation: 9174

You can add position: relative to the ul instead of the li and achieve the desired result

HTML

<ul class="threepane">
    <li>
        <h3>Section 1</h3>
        <p>Foo <br /> bar <br /> baz </p>
        <a href="x.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 2</h3>
        <p>Foo <br/> bar </p>
        <a href="y.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 3</h3>
        <p>Foo</p>
        <a href="z.html" class="button">More</a>
    </li>
</ul>

CSS

.button {
      position: absolute;
      bottom: 0; 
 }

li {
  width: 32%;
  float: left;
  height: 100%;
}

.threepane {
  overflow: hidden;
  position: relative;
}

Example : http://jsbin.com/xatihoneze/edit?html,css,output

Upvotes: 1

San
San

Reputation: 279

You can use flexbox like below. It supports IE10 onwards.

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	
	box-sizing: border-box; 
}
.threepane {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.threepane li {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
          background: yellow;
          position: relative;
  
}
.threepane li p {
  margin-bottom: 30px;
}
.threepane li a {
  position: absolute;
  bottom: 5px;
}
<ul class="threepane">
    <li>
        <h3>Section 1</h3>
        <p>Foo <br /> bar <br /> baz </p>
        <a href="x.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 2</h3>
        <p>Foo <br/> bar </p>
        <a href="y.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 3</h3>
        <p>Foo</p>
        <a href="z.html" class="button">More</a>
    </li>
</ul>

Upvotes: 1

Related Questions