CODEWITHSUNDEEP
htmlcssflexboxwidthmargin
nik_avp
nik_avp

Reputation: 25

My width is not changing forcing my divs to break up into two rows

Row

<div class="container" style="display:flex;
    flex-direction: row;
    justify-content: left;
    align-items: left;
display: flex;
margin-bottom: 25px;
margin-left: -45px;
flex-wrap: wrap;
    ">
<p>&nbsp;</p>

<div class="box" style=" width: 210px; height: 340px; display:flex; border-style: dotted; border-width: 1px; border-color: rgb(230, 230, 230);  flex-direction: column; max-width: 25rem; min-width: 18rem; align-items: left; justify-content: left;  margin: 0px; 
    text-align: left;"><a href="http://www.example.com/" style="text-align: center; top: 25px;"><img font-family:lucida="" sans="" src="/images/contentimages/images/Baby - Copy 2.png" style="width: 208px; height: 208px; display: block; margin: auto; position: relative; top: 10px;" /><strong><span style="font-size:20px;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"></span></span></strong></a><strong></strong><br />
<span style="font-size:18px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Baby<a href="https://dummyimage.com/350x300/000/fff" style="color: rgb(116, 15, 110); text-align: center; top: 25px;"><span style="font-size: 18px;">&nbsp;</span></a><span style="font-weight: bolder;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="http://www.example.com/">View details <i class="far fa-chevron-right pl-1"></i></a>&nbsp; &nbsp; </span></span></div>

<div class="box" style=" width: 210px; height: 340px; display:flex; border-style: dotted; border-width: 1px; border-color: rgb(230, 230, 230);  flex-direction: column; max-width: 25rem; min-width: 18rem; align-items: left; justify-content: left;  margin: 0px; 
    text-align: left;"><a href="http://www.example.com/" style="text-align: center; top: 25px;"><img font-family:lucida="" sans="" src="/images/contentimages/images/Birthday - Copy 5.png" style="width: 208px; height: 208px; display: block; margin: auto; position: relative; top: 10px;" /><strong><span style="font-size:20px;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"></span></span></strong></a><strong></strong><br />
<span style="font-size:18px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;Birthday<a href="https://dummyimage.com/350x300/000/fff" style="color: rgb(116, 15, 110); text-align: center; top: 25px;"><span style="font-size: 18px;">&nbsp;</span></a><span style="font-weight: bolder;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="http://www.example.com/">View details <i class="far fa-chevron-right pl-1"></i></a>&nbsp; &nbsp; </span></span></div>

<div class="box" style=" width: 210px; height: 340px; display:flex; border-style: dotted; border-width: 1px; border-color: rgb(230, 230, 230);  flex-direction: column; max-width: 25rem; min-width: 18rem; align-items: left; justify-content: left;  margin: 0px; 
    text-align: left;"><a href="http://www.example.com/" style="text-align: center; top: 25px;"><img font-family:lucida="" sans="" src="/images/contentimages/images/Business_Greetings - Copy 3.png" style="width: 208px; height: 208px; display: block; margin: auto; position: relative; top: 10px;" /><strong><span style="font-size:20px;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"></span></span></strong></a><strong></strong><br />
<span style="font-size:18px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Business Greetings<a href="https://dummyimage.com/350x300/000/fff" style="color: rgb(116, 15, 110); text-align: center; top: 25px;"><span style="font-size: 18px;">&nbsp;</span></a><span style="font-weight: bolder;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1" data-purl="custom-business-forms" href="http://www.example.com/">View details <i class="far fa-chevron-right pl-1"></i></a>&nbsp; &nbsp; </span></span></div>

<p>&nbsp;</p>
</div>

It seems like the 3rd box doesn't fit into the row?

I tried readjusting the width of the div, but it seems like that isn't the issue?

However when I remove flex-wrap option, the 3rd box goes back in the same row as the 2 other boxes?

Upvotes: 1

Views: 37

Answers (1)

Mat.C
Mat.C

Reputation: 1439

This is because your boxes have a fixed width of 200px, from this style: width: 200px.

You can instead give them these attributes:

width: 33%; 
max-width: 200px;

That will let the boxes have a max-width of 200px but resizing the width to have 30% of the container width if needed, not making them wrap into separate rows.

I highly suggest reorganizing the code using a style tag or a css file

Upvotes: 1

Related Questions