CODEWITHSUNDEEP
htmlcss
Sharon99
Sharon99

Reputation: 49

wrapping divs when overflow

I have two divs next to each other. The right div contains an image, and the left div contains text. I'm trying to figure out how to make the right div move below the image when it starts to cover the image, as the browser window is made smaller.

Below is the HTML and css. How should I adjust the css? Any help is appreciated.

HTML:

        <div class="divcontainer">

            <div class="leftdiv"><img src="images.jpg" alt="image"></div> 

            <div class="rightdiv">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Hic quoque suus est de summoque bono dissentiens dici vere 
            Peripateticus non potest. Duo Reges: constructio interrete. 
            Haec para/doca illi, nos admirabilia dicamus. Sed quanta sit 
            alias, nunc tantum pos
            </p>
            </div>

        </div>

CSS:

        .divcontainer{  
        }

        .leftdiv{   
            float:left;
            width: 20%;
            margin: 1%;
            padding: 1%;        
        }

        .rightdiv{
            float:left;
            width: 70%;
            margin: 1%;
            padding: 1%;    
        }

Upvotes: 1

Views: 72

Answers (3)

dippas
dippas

Reputation: 60543

use flexbox for that:

*,
*:before,
*::after {
  box-sizing: border-box
}

body, p {
  margin: 0
}

.divcontainer {
  display: flex;
  flex-wrap: wrap;
  background: lightblue;
}

.divcontainer>div {
  border: 1px solid red;
  margin: 5px;
}

.leftdiv {
  flex: 0 20%
}

.rightdiv {
  flex: 0 70%
}

img {
  display: block;
}
<div class="divcontainer">
  <div class="leftdiv"><img src="//placehold.it/200x200" alt="image"></div>
  <div class="rightdiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Duo Reges: constructio interrete. Haec para/doca illi, nos admirabilia dicamus. Sed quanta sit alias, nunc
      tantum pos
    </p>
  </div>
</div>

if you want to have full width of those blocks in smaller screens, you can create a media query something like:

*,
*:before,
*::after {
  box-sizing: border-box
}

body,
p {
  margin: 0
}

.divcontainer {
  display: flex;
  flex-wrap: wrap;
  background: lightblue;
}

.divcontainer>div {
  border: 1px solid red;
  margin: 5px;
}

.leftdiv {
  flex: 0 20%
}

.rightdiv {
  flex: 0 70%
}

img {
  display: block;
}

@media(max-width:640px) {
  .divcontainer>div {
    flex: 0 100%
  }
}
<div class="divcontainer">
  <div class="leftdiv"><img src="//placehold.it/200x200" alt="image"></div>
  <div class="rightdiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Duo Reges: constructio interrete. Haec para/doca illi, nos admirabilia dicamus. Sed quanta sit alias, nunc
      tantum pos
    </p>
  </div>
</div>

Upvotes: 2

Johannes
Johannes

Reputation: 67738

Use a media query to switch both elements to 100% width below a certain screen width (500px in my snippet):

(note that i also set up a rule for the image itself to fill its container width, except when that becomes wider than the original width - in my example 350px)

  .divcontainer {
  padding: 10px;
}

.leftdiv {
  float: left;
  width: 20%;
  margin: 1%;
  padding: 1%;
}

.leftdiv img {
  width: 100%;
  max-width: 350px;
}

.rightdiv {
  float: left;
  width: 70%;
  margin: 1%;
  padding: 1%;
}

@media screen and (max-width: 500px) {
  .leftdiv,
  .rightdiv {
    width: 100%;
  }
<div class="divcontainer">

  <div class="leftdiv"><img src="http://placehold.it/350x240" alt="image"></div>

  <div class="rightdiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Duo Reges: constructio interrete. Haec para/doca illi, nos admirabilia dicamus. Sed quanta sit alias, nunc
      tantum pos
    </p>
  </div>

</div>

Upvotes: 2

talaub
talaub

Reputation: 187

You specified them as 20% and 70% width. That means that they always fit in one line, because they will never cover 100% width. You have to use a media-query to specify a break-point where the CSS should change.

Upvotes: 1

Related Questions