Why won't my div resize when the browser resizes?

Question

I'm working on a pretty simple website right now that will serve as a sort of dictionary for some of my HTML and CSS work. I have a div for CSS terms on the page. When I shrink the browser, everything else on the page shrinks but this div moves to the far right and becomes less wide. The height stays the same but the width of the div becomes thin. The words in the div flow out and this causes there to be a scrollbar.

At the moment, my HTML looks like this:

 .terms {
      list-style-position: inside;
      background-color: powderblue;
      box-shadow: 10px 10px 15px dimgray;
      padding: 20px;
      margin-left: 370px;
      margin-right: 370px;
    }

<div class="terms">
  <h2> CSS PROPERTIES: </h2>
    <ul>
     <li> <span class="def"> text-align </span> - left, center, right </li>
    </ul>
</div>

The other elements on my page are paragraphs and they all resize. I have 2 other divs on the page for side comments but those resize with the browser too. In case it helps, this is the CSS for the div that actually resizes correctly:

.notes{
      text-align: center;
      padding: 20px;
      font-weight: bold;
      border: 10px dotted navy;
      display: inline-block;
    }

Does anyone have any idea why this particular div might not resize with the browser?

Please add
tag wrap the li – Alfin Paul Jul 13 '18 at 05:25 — Alfin Paul, Jul 13 '18 at 05:25

score 1 · Accepted Answer · edited Jul 13 '18 at 06:09

1

Issue is you have added following styles in your div:

.terms {
  list-style-position: inside;
  background-color: powderblue;
  box-shadow: 10px 10px 15px dimgray;
  padding: 20px;
  /*Removing the margins from left and right
  margin-left: 370px;
  margin-right: 370px;*/
}

Removing theses styles will solve your problem

edited Jul 13 '18 at 06:09

user158

12,852
7
62
94

answered Jul 13 '18 at 05:29

Charu Maheshwari

1,583
1
8
9

score 0 · Answer 2 · answered Jul 13 '18 at 05:35

You can also try with max-width

.terms {
  list-style-position: inside;
  background-color: powderblue;
  box-shadow: 10px 10px 15px dimgrey;
  padding: 20px;
  max-width: 1160px;
  margin: 0 auto;
}

.notes {
  text-align: center;
  padding: 20px;
  font-weight: bold;
  border: 10px dotted navy;
  display: inline-block;
}

<div class="terms">
  <h2> CSS PROPERTIES: </h2>
  <ul>
    <li> <span class="def"> text-align </span> - left, center, right </li>
  </ul>
</div>

score 0 · Answer 3 · answered Jul 13 '18 at 05:42

0

Try using % or vh instead of px in your css. A div with auto resize when changing window width\height May not exactly match your issue but I think it is relevant to yours.I hope this helps.

answered Jul 13 '18 at 05:42

P.Sai Shreyashi

43
3

score 0 · Answer 4 · answered Jul 13 '18 at 05:52

0

You can see remove margin left and right ,and add ul tags.

answered Jul 13 '18 at 05:52

Daily Life Space

11
2

Why won't my div resize when the browser resizes?

4 Answers4