CODEWITHSUNDEEP
htmlcss
Josh Potter
Josh Potter

Reputation: 1729

Can't get text to align to bottom

I recently have had problems forcing this text to align to the bottom of a div. Here is what's happening:

https://jsfiddle.net/d40f37dr/1/

.bottom {
    position: absolute;
    bottom: 0;
}
.pinfo {
    height: 100px;
    font-size: 18px;
    position: relative;
}

As you can see, I used positioning to position the div class ".bottom" to bring it to the bottom. However, it forces the text into the picture, which was not what I was looking for. I know I could position it with left, but the images users will be posting will vary with size meaning that the positioning will be off when a picture with different dimensions is used.

So then I tried to do it through vertical-align:

https://jsfiddle.net/d40f37dr/2/

.bottom {
    display: table-cell;
    vertical-align: bottom;
}

But it doesn't seem to do anything.

I'd like it to look like this:

Does anyone have any advice?

Upvotes: 2

Views: 665

Answers (7)

Manmeet S. Oberoi
Manmeet S. Oberoi

Reputation: 1122

Change .bottom class to .bottom:after

.bottom:after {
  position: absolute;
  bottom: 0;
  left: 0;
}

Upvotes: 0

sonam gupta
sonam gupta

Reputation: 785

just replace this css in class bottom:

.bottom {
    bottom: 0;
    position: absolute;
    text-align: right;
    width: 100px;
}

Upvotes: 0

ketan
ketan

Reputation: 19341

Check following what you need. Use position: relative; display: table; for pinfo class and 

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

Will solve your issue.

.xw li {
	position: relative;
	background: #fff;
	border: #b8b8b8;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	margin: 0 1.618rem 1.618rem 0;
	padding: 0;
	list-style-type: none;
}
.list li {
	width: 100%;
}
.list img {
	height: 100px; /* you can use % */
	width: auto;
	float: left;
}
.pinfo {
	height: 100px;
	font-size: 18px;
    position: relative;
    display: table;
}
.bottom {
    bottom: 0;
    position: absolute;
    vertical-align: bottom;
}
<section class="main list" id="view">
<ul class="xw">
  <li class="np md"><img src="http://i.imgur.com/nkWpdCK.jpg">
    <div class="pinfo"> Ad nostrud cupidatat sed ut excepteur nisi adipisicing lorem officia proident, laboris qui occaecat nisi voluptate cupidatat nisi velit i.
      <div class="bottom">est</div>
    </div>
  </li>
</ul>

Check Fiddle here

Upvotes: 1

Mladen Oršolić
Mladen Oršolić

Reputation: 1422

Try this :

.bottom {
    position: absolute;
    bottom: 0;
    left: 100px;
}

Upvotes: 0

noa-dev
noa-dev

Reputation: 3641

Fixed it for you:

since you were floating the image left and the div had an automated width of 100% it filled the whole

  • => therefore the text positioned absolute was aligned correctly to the bottom left.

    https://jsfiddle.net/d40f37dr/5/

    new Css:

    .xw li {
    background: #fff;
    position:relative;
    border: #b8b8b8;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    margin: 0 1.618rem 1.618rem 0;
    padding: 0;
    list-style-type: none;
}
.list li {
    width: 100%;
    height: 100px;
}
.list img {
    height: 100px; /* you can use % */
    width: auto;
    float: left;
}
.pinfo {
    height: 100px;
    font-size: 18px;
    position: relative;
    float:right;
    width:87%;
}
.bottom {
    position: absolute;
    bottom: 0;
}

    Upvotes: 0

    • G.L.P
    G.L.P

    Reputation: 7217

    Try like this: Demo

    .bottom {
    clear:both; 
    margin-left:100px;
}

    HTML:

        <li class="np md"><img src="http://i.imgur.com/nkWpdCK.jpg"/>
    <div class="pinfo"> Ad nostrud cupidatat sed ut excepteur nisi adipisicing lorem officia proident, laboris qui occaecat nisi voluptate cupidatat nisi velit i.         
    </div>
       <div class="bottom">est</div>
  </li>

    Upvotes: 0

    Y.Puzyrenko
    Y.Puzyrenko

    Reputation: 2195

    It's simple, you didn't specify the height of an element, so your .bottom block has height of the text, and text aligned just on the bottom of itself, so add something like 

    height: 50px;

    to your .bottom class and it will work.

    Upvotes: 0

    Related Questions