Border isn't going all of the way down-CodePudding

I have list inside a div.

The issue is that the div isn't going all of the way down to cover the full list although I am using height: auto.

I don't know if it has anything to do with it. It is working for others except for this particular div.

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-image: url('../Images/background4.png');
  width: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 110%;
  overflow-y: auto;
  overflow-x: hidden;
}

.coatofarms {
  width: 5%;
  z-index: 15;
  position: absolute;
  left: 0.5%;
  top: -2%;
  transition: all .1s ease-in-out;
}

.coatofarms:hover {
  top: -1%;
  transform: scale(1.0);
}

.topnav {
  overflow: hidden;
  background-color: #e1bc85;
  position: absolute;
  top: %;
  width: 100%;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  margin-left: 10%;
  font-family: Bodoni Mt;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #537797;
  color: white;
}

table {
  background-color: #537797;
  width: 100%;
  position: absolute;
  height: 1.5%;
  top: 6.5%;
}

.buttonimage {
  opacity: 0.9;
  width: 15%;
  position: absolute;
  top: 81%;
  left: 42.5%;
}

a.link:link {
  color: #efefef;
}

a.link:visited {
  color: #000000;
  text-decoration: none;
}

.visiting {
  position: absolute;
  top: 10%;
  left: 47.5%;
  font-family: 'Quicksand', sans-serif;
  font-size: 40px;
  color: white;
  background-color: black;
  border-radius: 10px;
}

.rules {
  z-index: 1;
  color: white;
}

.divrules {
  position: absolute;
  top: 30%;
  border: 3px solid black;
  width: 35%;
  height: auto;
  background-color: black;
  opacity: 0.8;
  border-radius: 2%;
  left: 1%;
}

.ruleswords {
  z-index: 1;
  color: white;
}

.divvrules {
  position: absolute;
  top: 30%;
  border: 3px solid black;
  width: 35%;
  height: auto;
  background-color: black;
  opacity: 0.8;
  border-radius: 2%;
  right: 1%;
}

.ruleswords1 {
  z-index: 1;
  color: white;
}

.cost {
  z-index: 1;
  color: white;
  position: absolute;
  left: 0;
}

.tour {
  width: 40%;
  position: relative;
  left: 55%;
  float: top;
  border-radius: 45%;
  transition: all .1s ease-in-out;
}

.tour:hover {
  transform: scale(1.04);
}

.rules2 {
  z-index: 1;
  color: white;
}

.ruleswords2 {
  z-index: 1;
  color: white;
}

.divrules2 {
  position: absolute;
  top: 30%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 3px solid black;
  width: 25%;
  height: auto;
  background-color: black;
  opacity: 0.8;
  border-radius: 2%;
}

.ruleswords2 {
  z-index: 1;
  color: white;
}

```
<!DOCTYPE html>
<html>

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Visit</title>
  <link rel="icon" href="Images/flag.png">
  <link rel="stylesheet" href="CSS/visit.css">
</head>

<body>
  <!--main-->

  <a href="index.html">
    <div ><img src="Images/coabetter.png"  width="75px" z-index="2"></div>
  </a>
  <div >
    <a href="food.html">Food</a>
    <a href="landmarks.html">Landmarks</a>
    <a  href="visit.html">Visit Us</a>

  </div>

  <div >

    <h2 >Visiting</h2>


    <div >
      <h3 >Rules for going into Egypt</h3>
      <ul >
        <br>
        <li>Each traveler can only have a maximum of one liter of alcoholic drinks and 200 cigarettes, 25 cigars, or 200 grams of Tobacco.
        </li>
        <br>
        <li>Goods not exceeding more than $200 from the duty-free shops within one month of arrival may be exempted from customs along with all personal effects, as long as it is for personal use.<br>

        </li>
        <br>
        <li>All firearms, including sporting guns, narcotics, drugs, cotton, and poultry are prohibited

        </li>
        <br>
        <li>Precious items purchased in Egypt, such as Gold and Silver, can only be exported in small quantities if it is clear it is for personal use.

        </li>
        <br>
        <li>Certified government health certificates are required in the event a traveler is accompanied by their pet, and is open to additional inspection by local veterinarians.

        </li>
        <br>
        <li>There is a foreign currency limit of approximately $10,000 (or its equivalent) and a local currency limit of 5,000 Egyptian Pounds that can be brought in or taken out of the country.
        </li>
      </ul>

    </div>

    <div >
      <h3 >Cost For the Trip</h3>
      <ul >
        <br>
        <br>
        <br>
        <li>
          Airfare - $800
        </li>
        <br>
        <li>
          Accommodations - $350
        </li>
        <br>
        <li>
          Transportation - $640
        </li>
        <br>
        <li>
          Attractions - $320
        </li>
        <br>
        <li>
          Food and Drink - $120
        </li>
        <br>
        <li>
          Souvenirs/Random Spending - $200
        </li>
        <li>
          Total - $2,430
        </li>
      </ul>
      <img src="Images/tour.jpg" >
    </div>



    <div >
      <h3 >Other Things</h3>
      <ul >
        <br>
        <li>
          Ask permission before taking a photo (even of people). In some places it is forbidden to take photos.
        </li>
        <br>
        <li>
          You should get a tour guide
        </li>
        <br>
        <li>
          Bargain in shops and markets.
        </li>
        <br>
        <li>
          Don’t pet stray animals(rabies)
        </li>
        <br>
        <li>
          <strong><u>Numbers</u></strong>
        </li>
        <br>
        <li>
          Police - 122
        </li>
        <br>
        <li>
          Cairo Airport Shuttle Bus - 19970
        </li>
        <br>
        <li>
          Flying Ambulance - 37766393/2
        </li>
        <br>
        <li>
          Ambulance - 123
        </li>
        <br>
        <li>
          Fire - 180
        </li>
        <br>
        <li>
          <strong><u>Vaccines</u></strong>
        </li>
        <br>
        <li>
          Rabies
        </li>
        <br>
        <li>
          Typhoid
        </li>
        <br>
        <li>
          Yellow Fever
        </li>
        <br>
        <li>
          <strong><u>Other Info</u></strong>
        </li>
        <br>
        <li>
          Be Careful if you are part of the LGBTQ community.
        </li>
        <br>
        <li>
          You need a Visa, Apply here: <a href="https://www.visa2egypt.gov.eg"  target="_blank">https://www.visa2egypt.gov.eg.</a>
        </li>
      </ul>

    </div>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </table>
</body>


</html>

CodePudding user response：

You should try look at the positioning of the different elements that you in the list in your CSS code and use display:flex in your code.

CodePudding user response：

I rearrange your html. display it into flex. remove unnecessary css, add some css. Hope this is what you are looking at.

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-image: url('../Images/background4.png');
  width: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 110%;
  overflow-y: auto;
  overflow-x: hidden;
}

.coatofarms {
  width: 5%;
  z-index: 15;
  position: absolute;
  left: 0.5%;
  top: -2%;
  transition: all .1s ease-in-out;
}

.coatofarms:hover {
  top: -1%;
  transform: scale(1.0);
}

.topnav {
  overflow: hidden;
  background-color: #e1bc85;
  position: absolute;
  top: %;
  width: 100%;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  margin-left: 10%;
  font-family: Bodoni Mt;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #537797;
  color: white;
}

table {
  background-color: #537797;
  width: 100%;
  position: absolute;
  height: 1.5%;
  top: 6.5%;
}

.buttonimage {
  opacity: 0.9;
  width: 15%;
  position: absolute;
  top: 81%;
  left: 42.5%;
}

a.link:link {
  color: #efefef;
}

a.link:visited {
  color: #000000;
  text-decoration: none;
}

.visiting {
  position: absolute;
  top: 10%;
  left: 47.5%;
  font-family: 'Quicksand', sans-serif;
  font-size: 40px;
  color: white;
  background-color: black;
  border-radius: 10px;
}


.divrules {

  border: 3px solid black;
  width: 100%;
  height: auto;
  background-color: black;
  opacity: 0.8;
  border-radius: 2%;
  left: 1%;
}

.ruleswords {
  z-index: 1;
  color: white;
}


.cost {
  z-index: 1;
  color: white;
  left: 0;
}

.tour {
  width: 40%;
  position: relative;
  left: 55%;
  float: top;
  border-radius: 45%;
  transition: all .1s ease-in-out;
}

.tour:hover {
  transform: scale(1.04);
}


.allofthem {
  display: flex;
  justify-content: space-evenly;
  grid-gap: 20px;
  margin-top: 15%;
  }

```
<!DOCTYPE html>
<html>

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Visit</title>
  <link rel="icon" href="Images/flag.png">
  <link rel="stylesheet" href="CSS/visit.css">
</head>

<body>
  <!--main-->

  <a href="index.html">
    <div ><img src="Images/coabetter.png"  width="75px" z-index="2"></div>
  </a>
  <div >
    <a href="food.html">Food</a>
    <a href="landmarks.html">Landmarks</a>
    <a  href="visit.html">Visit Us</a>

  </div>



    <h2 >Visiting</h2>
  <div >

    <div >
      <h3 >Rules for going into Egypt</h3>
      <ul >
        <br>
        <li>Each traveler can only have a maximum of one liter of alcoholic drinks and 200 cigarettes, 25 cigars, or 200 grams of Tobacco.
        </li>
        <br>
        <li>Goods not exceeding more than $200 from the duty-free shops within one month of arrival may be exempted from customs along with all personal effects, as long as it is for personal use.<br>

        </li>
        <br>
        <li>All firearms, including sporting guns, narcotics, drugs, cotton, and poultry are prohibited

        </li>
        <br>
        <li>Precious items purchased in Egypt, such as Gold and Silver, can only be exported in small quantities if it is clear it is for personal use.

        </li>
        <br>
        <li>Certified government health certificates are required in the event a traveler is accompanied by their pet, and is open to additional inspection by local veterinarians.

        </li>
        <br>
        <li>There is a foreign currency limit of approximately $10,000 (or its equivalent) and a local currency limit of 5,000 Egyptian Pounds that can be brought in or taken out of the country.
        </li>
      </ul>

    </div>


<div >
      <h3 >Other Things</h3>
      <ul >
        <br>
        <li>
          Ask permission before taking a photo (even of people). In some places it is forbidden to take photos.
        </li>
        <br>
        <li>
          You should get a tour guide
        </li>
        <br>
        <li>
          Bargain in shops and markets.
        </li>
        <br>
        <li>
          Don’t pet stray animals(rabies)
        </li>
        <br>
        <li>
          <strong><u>Numbers</u></strong>
        </li>
        <br>
        <li>
          Police - 122
        </li>
        <br>
        <li>
          Cairo Airport Shuttle Bus - 19970
        </li>
        <br>
        <li>
          Flying Ambulance - 37766393/2
        </li>
        <br>
        <li>
          Ambulance - 123
        </li>
        <br>
        <li>
          Fire - 180
        </li>
        <br>
        <li>
          <strong><u>Vaccines</u></strong>
        </li>
        <br>
        <li>
          Rabies
        </li>
        <br>
        <li>
          Typhoid
        </li>
        <br>
        <li>
          Yellow Fever
        </li>
        <br>
        <li>
          <strong><u>Other Info</u></strong>
        </li>
        <br>
        <li>
          Be Careful if you are part of the LGBTQ community.
        </li>
        <br>
        <li>
          You need a Visa, Apply here: <a href="https://www.visa2egypt.gov.eg"  target="_blank">https://www.visa2egypt.gov.eg.</a>
        </li>
      </ul>

    </div>


    <div >
      <h3 >Cost For the Trip</h3>
      <ul >
        <br>
        <br>
        <br>
        <li>
          Airfare - $800
        </li>
        <br>
        <li>
          Accommodations - $350
        </li>
        <br>
        <li>
          Transportation - $640
        </li>
        <br>
        <li>
          Attractions - $320
        </li>
        <br>
        <li>
          Food and Drink - $120
        </li>
        <br>
        <li>
          Souvenirs/Random Spending - $200
        </li>
        <li>
          Total - $2,430
        </li>
      </ul>
      <img src="Images/tour.jpg" >
    </div>



    
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </table>
</body>


</html>