0

I have a problem with filling parent's width:

.slider {
  max-width: 575px;
  width: 575px;
  height: 250px;
  background: #e6e6e6;
  float: left;
}

.info {
  float: left;
  width: calc(100% - 575px);
}
<div class="parent">
  <div class="slider">
    Here is some images
  </div>
  <div class="info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
  </div>
</div>
  
     

What i actually want:

enter image description here

Rafael
  • 7,605
  • 13
  • 31
  • 46
batgerel.e
  • 837
  • 1
  • 10
  • 31

1 Answers1

0

Just remove float: left; from .info:

.info {
  width: calc(100% - 575px);
}

.slider {
  max-width: 575px;
  width: 575px;
  height: 250px;
  background: #e6e6e6;
  float: left;
}

.info {
  width: calc(100% - 575px);
}
<div class="parent">
  <div class="slider">
    Here is some images
  </div>
  <div class="info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada vel nulla et maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rutrum, mi sed tempor facilisis, nunc dui eleifend enim, a porttitor risus arcu a metus. Nullam sodales et ligula ut ultricies. Nullam leo metus, interdum at malesuada eu, ornare nec diam. Suspendisse eleifend fermentum imperdiet. Nam elit turpis, varius eu consequat sit amet, ullamcorper ac enim.
  </div>
</div>
  
     
Rafael
  • 7,605
  • 13
  • 31
  • 46