Reputation: 335

Unexplained white space on right side of two images within a div. How to remove

How the page layout should look^

As shown by the screenshot, the two images in this html code are making a white space on the right side of the page. There is no padding nor does the image itself extend beyond where it apparently does - what is causing this unnecessary white space and how do I remove it?

CSS below:

.Text {
    color: #bd8729;
    font-family: sans-serif;
}

body {
    margin: 0;
    font-family: serif, sans-serif;
    background-color: #F7F6F6;
}

/** {*/
    /*background: #000 !important;*/
    /*color: #0f0 !important;*/
    /*outline: solid #f00 1px !important;*/
/*}*/

.topnav {
    overflow: hidden;

}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;

    text-decoration: none;
    font-size: 17px;
}

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

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

.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

.leftSide {
    position: relative;
    float: left;
    width: 55%;

}

.leftPicture1 {
    padding-left: 20px;
    padding-bottom: 20px;
    position: relative;
    float: left;
    width: 45%;
    max-width: 100%;
    height: auto;
    display: block;

}

.leftPicture2 {
    padding-left: 20px;
    padding-bottom: 20px;
    position: relative;
    float: right;
    width: 45%;
    max-width: 100%;
    height: auto;
    display: block;
}

.rightSide {
    position: relative;
    float: right;
    width: 45%;

}



.form {
    border-radius: 5px;
    position: relative;
    float: left;
    background-color: #F7F6F6;
    width: 50%;
    padding: 20px;
    height: 120%;
    border: 20px black;

}
.insideForm {
    background-color: white;

    border: black 5px;
}


input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: white;
    color: #111011;
    padding: 12px 20px;
    border: #bd8729;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #bd8729;
}


.rightPicture1 {
    padding-left: 20px;
    padding-bottom: 20px;
    position: relative;
    width: 80%;
    margin-right: 0px;
    max-width: 100%;
    height: auto;

}

.rightPicture2 {
    padding-left: 20px;
    padding-bottom: 20px;
    position: relative;
    width: 80%;
    max-width: 100%;
    height: auto;
}


.centerDiv {
    position: relative;
    text-align: center ;

}

.footer {
    width: 100%;
    height: 100px;
    background-color: #303233;
    z-index: 10;
    margin-top: 1000px;
    position: relative;
    clear: both;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="responsive.css" media="screen and (max-width:900px)">
    <script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
</head>
<body>

<div class="topnav" id="myTopnav">
    <img src="logo.png" style="float: left; padding-top: 25px; padding-left: 25px; width: 10%;">
    <img src="icon.png" style="float: right; padding-top: 25px; padding-right: 25px; width: 3%;">

    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
    </a>
</div>


<div class="leftSide">
    <div class="centerDiv"><h2 class="Text"> Experience the best golf and so much more at Portugal's #1 Golf
        Resort </h2></div>

    <img src="748A5226_RT.jpg" alt="Golf Course showing two ponds" style="width: 100%;">
    <div class="centerDiv">
        <p class="Text">Ranked at #4 in Golf World's Top 100 Continental Europe 2019 list, Monte Rei is the perfect end
            of year
            destination, pairing excellent golf and attractive resort experiences.
        </p>
    </div>
    <p class="Text">
    <ul style="list-style-position: inside">
        <li> Award-winning golf on Monte Rei's Signature Jack Nicklaus North Course</li>
        <li> Refined dining options, from formal evening dining to relaxed poolside lunches</li>
        <li> Activities, from yoga and cycling to guided local tours, ensure that no moment is wasted</li>
        <li> Variety of package options available, including other Algarve golf courses</li>
        <li> Only 45 minutes from Faro airport</li>
    </ul>
    </p>

    <div class="leftPicture1">
        <img src="img.jpeg" width="95%">
    </div>
    <div class="leftPicture2">
        <img src="img3.jpg" width="95%">
    </div>

</div>

<div class="rightSide Text">

    <div class="form">
        <div class="insideForm">
            <form action="/action_page.php">
                <div class="centerDiv"><h2> Find out more today </h2></div>
                <hr>
                <p> Simply enter your details or call Monte Rei’s team on +351 281 950 950. Terms and conditions apply.
                </p>
                <input type="text" id="name" name="firstname" placeholder="Name">
                <input id="email" name="email" placeholder="Email">
                <input type="text" id="phone" name="phone" placeholder="Phone">
                <input type="checkbox" name="tsandcs" value="Checked"> Check this box to indicate that you have read and
                agree to the terms of the Monte Rei Data Policy<br>
                <input type="submit" value="SEND">

            </form>
        </div>
    </div>

    <div class="rightPicture1">
        <img src="Swimming%20pool.jpg" width="95%">
    </div>
    <div class="rightPicture2">
        <img src="Monte_Rei_Exterior_01_Jack_Hardy_2018.jpg" width="95%">
    </div>
</div>


<div class="footer">
    <img src="logo.png" style="float: left; padding-top: 25px; padding-left: 25px; width: 10%;">
    <img src="icon.png" style="float: right; padding-top: 25px; padding-right: 25px; width: 3%;">
</div>
</body>
</html>

Is there anything that I am missing here? I have had this problem before and I was unable to fix it.

EDIT: New screenshot showing supersized image

Upvotes: 3

Answers (3)

Revti Shah

Reputation: 642

Here is the code. Hope it will help you. if any changes please let me know.

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

* {
  margin: 0;
  padding: 0;
}

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

.logo-wrap {
  display: flex;
  justify-content: space-between;
}

.Text {
  color: #bd8729;
  font-family: sans-serif;
}

body {
  font-family: serif, sans-serif;
  background-color: #F7F6F6;
}


.topnav {
  padding: 20px;

}

.content-part {
  padding: 20px 0;
  display: flex;
  width: 100%;
}

.left-part {
  margin: 15px 0;
  padding: 0 20px;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;

  text-decoration: none;
  font-size: 17px;
}

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

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

.topnav .icon {
  display: none;
}



.leftSide {
  width: 70%;

}

.leftPicture1 {
  padding-left: 20px;
  padding-bottom: 20px;


}

.leftPicture2 {
  padding-left: 20px;
  padding-bottom: 20px;

}

.rightSide {

  width: 30%;

}

.left-images {
  display: flex;
}

.form {
  border-radius: 5px;
  background-color: #F7F6F6;
  padding: 0 20px 20px 20px;


}

.insideForm {
  background-color: white;
  padding: 10px;
  border: black 5px;
}


input[type=text],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: white;
  color: #111011;
  padding: 12px 20px;
  border: #bd8729;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #bd8729;
}


.rightPicture1 {
  padding-left: 20px;
  padding-bottom: 20px;
  height: auto;

}

.rightPicture2 {
  padding-left: 20px;
  padding-bottom: 20px;
  height: auto;
}


.centerDiv {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}

.footer {
  width: 100%;
  height: 80px;
  background-color: #303233;
  position: relative;
  display:flex;
  justify-content:space-between;
  padding:20px;
}

@media screen and (max-width: 767px) {
  .topnav a:not(:first-child) {
    display: none;
  }
.content-part,.left-images{
  display:block;
}
.leftPicture1,.leftPicture2{padding-left:0}
.leftSide,.rightSide{width:100%;}
  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="responsive.css">

  </head>

  <body>
    <div class="topnav" id="myTopnav">
      <div class="logo-wrap">
        <img src="https://dummyimage.com/100x50/000000/ffffff.png">
        <img src="https://dummyimage.com/100x50/ff00ff/ffffff.png">
      </div>

      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </div>

    <div class="content-part">
      <div class="leftSide">
        <div class="centerDiv">
          <h2 class="Text"> Experience the best golf and so much more at Portugal's #1 Golf
            Resort </h2>
        </div>

        <img src="http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg" alt="Golf Course showing two ponds" style="width: 100%;">

        <div class="left-part">
          <div class="centerDiv">
            <p class="Text">Ranked at #4 in Golf World's Top 100 Continental Europe 2019 list, Monte Rei is the perfect end
              of year
              destination, pairing excellent golf and attractive resort experiences.
            </p>
          </div>
          <div class="points-Text">
            <ul style="list-style-position: inside">
              <li> Award-winning golf on Monte Rei's Signature Jack Nicklaus North Course</li>
              <li> Refined dining options, from formal evening dining to relaxed poolside lunches</li>
              <li> Activities, from yoga and cycling to guided local tours, ensure that no moment is wasted</li>
              <li> Variety of package options available, including other Algarve golf courses</li>
              <li> Only 45 minutes from Faro airport</li>
            </ul>
          </div>
        </div>
        <div class="left-images">
          <div class="leftPicture1">
            <img src="http://lorempixel.com/output/nature-q-c-640-480-6.jpg" width="100%">
          </div>
          <div class="leftPicture2">
            <img src="http://lorempixel.com/output/technics-q-c-640-480-5.jpg" width="100%">
          </div>
        </div>
      </div>

      <div class="rightSide Text">

        <div class="form">
          <div class="insideForm">
            <form action="/action_page.php">
              <div class="centerDiv">
                <h2> Find out more today </h2>
              </div>
              <hr>
              <p> Simply enter your details or call Monte Rei’s team on +351 281 950 950. Terms and conditions apply.
              </p>
              <input type="text" id="name" name="firstname" placeholder="Name">
              <input type="text" id="email" name="email" placeholder="Email">
              <input type="text" id="phone" name="phone" placeholder="Phone">
              <input type="checkbox" name="tsandcs" value="Checked"> Check this box to indicate that you have read and
              agree to the terms of the Monte Rei Data Policy<br>
              <input type="submit" value="SEND">

            </form>
          </div>
        </div>

        <div class="rightPicture1">
          <img src="http://lorempixel.com/output/business-q-c-640-480-8.jpg" width="100%">
        </div>
        <div class="rightPicture2">
          <img src="http://lorempixel.com/output/transport-q-c-640-480-3.jpg" width="100%">
        </div>
      </div>
    </div>

    <div class="footer">
      <img src="logo.png">
      <img src="icon.png">
    </div>
  </body>

</html>

Upvotes: 1

Sabina Hernández Gracia

Reputation: 81

Have you tried

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

It seems like you are struggling with box model sizes https://www.w3schools.com/css/css3_box-sizing.asp

Upvotes: 2

RustyBadRobot

Reputation: 566

You have added a width of 95% to the img tag:

<img src="img.jpeg" width="95%">

Change this to 100% or remove and add to your styles eg:

.leftPicture1 img {
  width: 100%;
}

Upvotes: 2

Unexplained white space on right side of two images within a div. How to remove

Answers (3)

Related Questions