float right does not work with min width

Question

I'm trying to align an image to the right and the text to the left. It works but its not responsive with min-width.

Notice if I put an image/div to the left instead the min-width works and keeps the text together. I'm using the same code in both cases: float right and left.

<h2>Image on the left</h2>
<div class="leftImage">
  <div class="image"></div>
</div>
<div id="wrap">
  <div class="textRight">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum purus a diam congue, facilisis                   interdum nunc dictum. In quis felis non libero dignissim hendrerit. Curabitur at iaculis massa. </p>
  </div>
</div>
<h2> Image to the right</h2>
<div class="rightImage">
  <div class="image"></div>
</div>
<div id="wrap">
  <div class="textLeft">
     <p>Loremmm ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum purus a diam congue, facilisis                 interdum nunc dictum. In quis felis non libero dignissim hendrerit. Curabitur at iaculis massa. </p>
  </div>
</div>

CSS

.image{
  width:300px;
  height:500px;
  background-color: blue;
}
.leftImage{
  margin-top: 20px;
  float:left;
  width:300px;
  height: 500px;
}
.rightImage{
  margin-top: 20px;
  float:right;
  width:300px;
  height: 500px;
  margin-left: 20px;
}
.textRight{
  background-color: blanchedalmond;
  height:150px;
  padding: 80px;
  padding-top: 60px;
  padding-bottom: 120px; 
  margin-left: 250px; 
}
.textLeft{
  background-color: blanchedalmond;
  height:150px;
  padding: 80px;
  padding-top: 60px;
  padding-bottom: 120px;
  margin-right: 250px; 
}
#wrap{
  margin-top: 160px;
  margin-bottom: 100px;
  width: 100%;
  min-height: 200px;
  min-width: 900px;
}

Any idea how I can fix it for the div to the right?

Thanks in advance

Dávid Rehák Dávid Rehák · Accepted Answer · 2018-02-24T19:03:09

If you want responsive img width use max-width:900px and width:100% Only problem here is you are using min-width so it can not be smaller then 900px;

HTML - is the same

        <h2>
          Imageto the right
        </h2>

        <div id="wrap">
          <div class="rightImage">
              <div class="image"></div>
          </div>
          <div class="textLeft">
            <p>Loremmm ipsum dolor sit amet, consectetur adipiscing elit. 
             Nullam rutrum purus a diam congue, facilisis interdum nunc 
             dictum. In quis felis non libero dignissim hendrerit. Curabitur 
             at iaculis massa. 
            </p>
          </div>
        </div>

CSS - change is in #wrap max-width:900px;

/* Carta/Menu */
 .image{
  width:300px;
  height:500px;
  background-color: blue;
}
 /*.leftImage{
    margin-top: 20px;
    float:left;
    width:300px;
    height: 500px;
} */
.rightImage{
    margin-top: 20px;
    float:right;
    width:300px;
    height: 500px;
    margin-left: 20px;
}
.textRight{
    background-color: blanchedalmond;
    height:150px;
    padding: 80px;
    padding-top: 60px;
    padding-bottom: 120px; 
    margin-left: 250px; 
}
.textLeft{
    background-color: blanchedalmond;
    height:150px;
    padding: 80px;
    padding-top: 60px;
    padding-bottom: 120px;
    margin-right: 250px; 

}
#wrap{
    margin-top: 160px;
    margin-bottom: 100px;
    width: 100%;
    min-height: 200px;
    max-width: 900px;
}

float right does not work with min width

1 Answers