Prevent children element from floating outside of parent div

Question

I have the following result:

As you can see, the "Install Now" button is overlapping with the text above, while it should be aligned with the WWW.DOMAIN.COM element.

Here is the html:

<div id="facebook_ad_description_wrapper">

  <div id="facebook_ad_headline">
    Headline
  </div>

  <div id="facebook_ad_description">
    This app is the new mobile app that will change the way you see the world.
  </div>

  <div>

    <div id="facebook_ad_url">
      WWW.DOMAIN.COM
    </div>

    <div id="facebook_ad_cta">
      Install Now
    </div>

  </div>

</div>

and here is the CSS:

#facebook_ad_description_wrapper {
  margin-top: -2px;
}

#facebook_ad_image {
  overflow: hidden;
  width: 464px;
  height: 246px;
  margin-left: 1px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  border-bottom: 1px #c4c4c4 solid;
}

#facebook_ad_headline {
  font-family: 'Georgia';
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  padding: 5px 10px 5px 10px;
}

#facebook_ad_description {
  font-family: 'helvetica';
  color: #000000;
  font-size: 12px;
  line-height: 16px;
  max-height: 80px;
  padding: 0px 10px 5px 10px;
}

#facebook_ad_url {
  padding: 5px 10px 10px 10px;
  font-size: 11px;
  line-height: 11px;
  color: #9197a3;
}

#facebook_ad_cta {
  font-family: 'helvetica';
  background-color: #f6f7f8;
  float: right;
  margin: -40px 10px 10px 10px;
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 2px;
  border-color: #cccccc #c5c6c8 #b6b7b9;
  color: #4e5665;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;
}

Because the length of the text "This app is the new mobile app that will change the way you see the world." can vary, I need a flexible solution that will always keep both the WWW.DOMAIN.COM and the "Install Now" button together on the same line, but below the text above.

I tried to play with clearfix, overflow and display:inline-block but could not figure out a solution to this layout issue.

How can fix this problem?

score 4 · Accepted Answer · edited May 23 '17 at 10:28

There are probably many ways to fix it, if you prefer to keep using float, so you can:

#facebook_ad_url {float:left;}
#facebook_ad_cta {float:right;}

And add overflow: auto; (or hidden, or more here) to their container for clearing floats.

Lastly, remove the unnecessary margin values on the button.

#facebook_ad_description_wrapper {
  margin-top: -2px;
}

#facebook_ad_image {
  overflow: hidden;
  width: 464px;
  height: 246px;
  margin-left: 1px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  border-bottom: 1px #c4c4c4 solid;
}

#facebook_ad_headline {
  font-family: 'Georgia';
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  padding: 5px 10px 5px 10px;
}

#facebook_ad_description {
  font-family: 'helvetica';
  color: #000000;
  font-size: 12px;
  line-height: 16px;
  max-height: 80px;
  padding: 0px 10px 5px 10px;
}

#facebook_ad_url {
  padding: 5px 10px 10px 10px;
  font-size: 11px;
  line-height: 11px;
  color: #9197a3;
  float: left; /*added*/
}

#facebook_ad_cta {
  font-family: 'helvetica';
  background-color: #f6f7f8;
  float: right;
  /* margin: -40px 10px 10px 10px; */
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 2px;
  border-color: #cccccc #c5c6c8 #b6b7b9;
  color: #4e5665;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;
}

<div id="facebook_ad_description_wrapper">

  <div id="facebook_ad_headline">
    Headline
  </div>

  <div id="facebook_ad_description">
    This app is the new mobile app that will change the way you see the world.
  </div>

  <div style="overflow: auto;">

    <div id="facebook_ad_url">
      WWW.DOMAIN.COM
    </div>

    <div id="facebook_ad_cta">
      Install Now
    </div>

  </div>

</div>

In addition, the modern CSS3 flexbox can solve it easily and cleanly.

<div style="display: flex; justify-content: space-between; align-items: center;">
  <div id="facebook_ad_url">WWW.DOMAIN.COM</div>
  <div id="facebook_ad_cta">Install Now</div>
</div>

#facebook_ad_description_wrapper {
  margin-top: -2px;
}

#facebook_ad_image {
  overflow: hidden;
  width: 464px;
  height: 246px;
  margin-left: 1px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  border-bottom: 1px #c4c4c4 solid;
}

#facebook_ad_headline {
  font-family: 'Georgia';
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  padding: 5px 10px 5px 10px;
}

#facebook_ad_description {
  font-family: 'helvetica';
  color: #000000;
  font-size: 12px;
  line-height: 16px;
  max-height: 80px;
  padding: 0px 10px 5px 10px;
}

#facebook_ad_url {
  margin-left: 10px;
  /* padding: 5px 10px 10px 10px; */
  font-size: 11px;
  line-height: 11px;
  color: #9197a3;
}

#facebook_ad_cta {
  font-family: 'helvetica';
  background-color: #f6f7f8;
  /* float: right; */
  /* margin: -40px 10px 10px 10px; */
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 2px;
  border-color: #cccccc #c5c6c8 #b6b7b9;
  color: #4e5665;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;
}

<div id="facebook_ad_description_wrapper">

  <div id="facebook_ad_headline">
    Headline
  </div>

  <div id="facebook_ad_description">
    This app is the new mobile app that will change the way you see the world.
  </div>

  <div style="display: flex; justify-content: space-between; align-items: center;">

    <div id="facebook_ad_url">
      WWW.DOMAIN.COM
    </div>

    <div id="facebook_ad_cta">
      Install Now
    </div>

  </div>

</div>

score 1 · Answer 2 · answered Jan 11 '16 at 16:52

Try giving the div that contains #facebook_ad_url and #facebook_ad_cta its own id/class and give it a little margin-top. You're floating the #facebook_ad_cta, which removes it from the normal page flow, then giving it a -40px margin-top, which causes it to move up into the area occupied by the description. But since the url and cta elements are already contained in their own div, you can add some space above to prevent the overlap.

Prevent children element from floating outside of parent div

2 Answers2