CODEWITHSUNDEEP
htmlcss
theplau
theplau

Reputation: 980

How do I get a float left image and float right text aligned inside a box?

I am trying to create a box with an image on the left and text (title, price & description) aligned on the right. The problem is, the text is always displayed outside the box. What am I doing wrong here?

.photo {
  width: 100%
}
.menu__item {
  width: 100%;
  border: 1px solid #c4c4c4;
  display: block;
}
.menu__item__photo {
  width: 40%;
  padding-right: 16px;
  display: block;
}
.menu__item__info__photo {
  width: 60%;
  display: block;
  float: right;
}
.menu__item__info__title {
  float: left;
  width: 78%;
}
.menu__item__info__price {
  float: right;
  width: 21%;
  text-align: right;
}
<div class="menu__item">
  <div class="menu__item__photo">
    <img src="http://placehold.it/350x150" class="photo">
  </div>
  <div class="menu__item__info__photo">

    <div class="menu__item__info__title">Product Title Here</div>
    <div class="menu__item__info__price">$9.99</div>

    <div class="menu__item__info__description">Description here..</div>

  </div>
</div>

Here is a fiddle: https://jsfiddle.net/pxanzefe/

Upvotes: 0

Views: 271

Answers (2)

j08691
j08691

Reputation: 207901

If you just want the text contained within the box, add overflow: auto; to the containing div:

.photo {
  width: 100%
}
.menu__item {
  width: 100%;
  border: 1px solid #c4c4c4;
  display: block;
  overflow:auto;
}
.menu__item__photo {
  width: 40%;
  padding-right: 16px;
  display: block;
}
.menu__item__info__photo {
  width: 60%;
  display: block;
  float: right;
}
.menu__item__info__title {
  float: left;
  width: 78%;
}
.menu__item__info__price {
  float: right;
  width: 21%;
  text-align: right;
}
<div class="menu__item">
  <div class="menu__item__photo">
    <img src="http://placehold.it/350x150" class="photo">
  </div>
  <div class="menu__item__info__photo">

    <div class="menu__item__info__title">Product Title Here</div>
    <div class="menu__item__info__price">$9.99</div>

    <div class="menu__item__info__description">Description here..</div>

  </div>
</div>

When you float elements they're removed from the flow of the document and adding the overflow rule restores the behavior you're after.

Upvotes: 1

DaniP
DaniP

Reputation: 38252

You can float your left item too:

  1. Float the .menu__item__photo item and add box-sizing to include the padding inside the 40% width.

  2. Use a clearfix method on your container.

.photo {
  width: 100%
}
.menu__item {
  width: 100%;
  border: 1px solid #c4c4c4;
  display: block;
}
.menu__item:after {
  content: "";
  display: table;
  clear: both;
}
.menu__item__photo {
  width: 40%;
  padding-right: 16px;
  display: block;
  float: left;
  box-sizing: border-box;
}
.menu__item__info__photo {
  width: 60%;
  display: block;
  float: right;
}
.menu__item__info__title {
  float: left;
  width: 78%;
}
.menu__item__info__price {
  float: right;
  width: 21%;
  text-align: right;
}
<div class="menu__item">
  <div class="menu__item__photo">
    <img src="http://placehold.it/350x150" class="photo">
  </div>
  <div class="menu__item__info__photo">
    <div class="menu__item__info__title">Product Title Here</div>
    <div class="menu__item__info__price">$9.99</div>
    <div class="menu__item__info__description">Description here..</div>
  </div>
</div>

Upvotes: 1

Related Questions