Terrell Anderson Terrell Anderson - 6 months ago 15
CSS Question

How to align div to bottom in parent element

I'm using the foundation framework to create a website, i am having a little trouble aligning a div class container to the bottom of the parents container.

Here is a photo of the problem.

Image 1

Notice the first image, everything is aligned properly. The second image on the other hand the

<div>
content is way off. I have it set to bottom:0; in the css but it's not working.

Here is the CSS

.container-home {
max-width:1175px;
background:#fff;
margin:0 auto;
padding:20px 0px 0 0px;
position:relative;
z-index:1;

}

.first-title-music {
background: url('http://cdn.ratedrnb.com/2016/06/large-title.png');
width:100%;
max-width:425px;
height:160px;
position:absolute;
bottom:0;
padding:5% 0 0 3%;
clear:bottom;
}

.artist-title {
color:#fff;
font-family:poppins;
font-weight:700;
text-transform:uppercase;
font-size:36px;
line-height:22px;
}

.song-title {
color:#fff;
font-family:poppins;
font-weight:300;
text-transform:uppercase;
font-size:24px;
}

.big-play {
position:absolute;
top:150px;
left:170px;
}

.second-title-music {
background: url('http://cdn.ratedrnb.com/2016/06/small-title.png');
width:100%;
max-width:190px;
height:70px;
position:absolute;
bottom:0;
padding:0;
}

.artist-title-small {
color:#fff;
font-family:poppins;
font-weight:700;
text-transform:uppercase;
font-size:18px;
line-height:20px;
}

.song-title-small {
color:#fff;
font-family:poppins;
font-weight:300;
text-transform:uppercase;
font-size:14px;
}



.big-play {
position:absolute;
top:150px;
left:170px;
}


and here is the html

<div class="row container-home">
<div class="row column" style="position:relative; padding:15px 0 0 2%;">

<div class="medium-6 column" style="max-width:425px; margin:0px; padding:0;">
<img src="http://cdn.ratedrnb.com/2016/06/mario2.png">

<div class="medium-4 column first-title-music">
<h1 class="artist-title">MARIO</h1>
<h1 class="song-title">I NEED MORE</h1>
</div>

<div class="large-12 column big-play">
<img src="http://cdn.ratedrnb.com/2016/06/big-play2.png">
</div>

</div>


<div class="medium-6 column" style="max-width:190px;max-height:190px; margin:0px; padding:0px; float:left;">
<img src="http://cdn.ratedrnb.com/2016/06/alicia2.png">

<div class="medium-4 column second-title-music">
<h1 class="artist-title-small">ALICIA KEYS</h1>
<h1 class="song-title-small">IN COMMON</h1>
</div>

</div>

</div>

</div>


Here is what I am trying to accomplish.

Image 2

Does anyone have a solution as to why the bottom aligned
<div>
in the second part of the html code is stretching that far beyond the height of the parent div.

Answer
 <html><head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="script.js"></script>
<style>

</style>
  </head>

  <body>
   <div class="row container-home">
<div class="row column newclass" >

<div class="medium-6 column bottomdiv" style="">
<img src="http://cdn.ratedrnb.com/2016/06/mario2.png" class="img1" >

<div class="medium-4 column first-title-music">
<h1 class="artist-title" style="">MARIO</h1>
<h1 class="song-title" >I NEED MORE</h1>
</div>

<div class="large-12 column big-play">
<img src="http://cdn.ratedrnb.com/2016/06/big-play2.png">
</div>

</div>


<div class="medium-6 column newclass2" style="">
<img src="http://cdn.ratedrnb.com/2016/06/alicia2.png">

<div class="medium-4 column second-title-music">
<h1 class="artist-title-small" >ALICIA KEYS</h1>
<h1 class="song-title-small" >IN COMMON</h1>
</div>

</div>

</div>

</div>



</body></html>

and CSs

/* Put your css in here */

h1 {
  color: red;
}
.container-home { 
 max-width:1175px;
 background:#fff;
 margin:0 auto;
 padding:20px 0px 0 0px;
 position:relative;
 z-index:1;

}

.first-title-music {
    background: url('http://cdn.ratedrnb.com/2016/06/large-title.png');
    width: 100%;
    max-width: 425px;
    height: 100px;
    position: absolute;
    bottom: 0;
    /* padding: 5% 0 0 3%; */
    clear: bottom;
    top: 331px;
}

.artist-title {
color:#fff;
font-family:poppins;
font-weight:700;
text-transform:uppercase;
font-size:36px;
line-height:22px;
}

.song-title {
color:#fff;
font-family:poppins;
font-weight:300;
text-transform:uppercase;
font-size:24px;
}

.big-play {
position:absolute;
top:150px;
left:170px;
}

.second-title-music {
    background: url('http://cdn.ratedrnb.com/2016/06/small-title.png');
    width: 100%;
    max-width: 190px;
    height: 70px;
    position: absolute;
    bottom: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    /* padding: 5% 0 0 3%; */
    clear: bottom;
    top: 135px;
}

.artist-title-small {
color:#fff;
font-family:poppins;
font-weight:700;
text-transform:uppercase;
font-size:18px;
line-height:20px;
}

.song-title-small {
color:#fff;
font-family:poppins;
font-weight:300;
text-transform:uppercase;
font-size:14px;
}



.big-play {
position:absolute;
top:150px;
left:170px;
}

.newclass
{
position:relative;padding:15px 0 0 2%;width: 100%;
}
.bottomdiv
{

    margin: 0px;
    padding: 0;
    float: left;
    width: 100%;
    max-width: 425px;
}
.artist-title , .song-title
{
margin-left: 60px !important;
}
.newclass2
{
    width: 100%;
    max-width: 190px;
    max-height: 190px;
    margin: 0px;
    padding: 0px;
    float: left;
    padding-left: 20px;
}
.artist-title-small , .song-title-small 
{
margin-left: 20px !important;

}
.img1{
height: 425px;
    width: 425px;
}

and the link https://plnkr.co/edit/52Ga8dT6wpTRklGDtvMX?p=preview for ref