Bollate

HTML

[ANSWERED] html – Unexplained white space on right side of two images within a div. How to remove

By

Nov 20, 2022 ,

Solution 1 :

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

Solution 2 :

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%;
}

Solution 3 :

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>

Problem :

How the page should look
How the page layout should look^

Image showing white space

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
Image with inline styling removed

Comments

Comment posted by Revti Shah

Which kind of page layout do you want? We can use another concept like flex. So please share image also.

Comment posted by Marcooz2007

Hi Revti, thanks for helping! I have just included a screenshot of the supersized image post-removing the inline styling. It should look like the first image in this thread. As for how it looks on a phone, I want the two images to completely fill the screen, one after the other.

Comment posted by Revti Shah

Let me check. I will get back to you.

Comment posted by Marcooz2007

Thanks 🙂 Rusty was able to help me fix it for the laptop sized screen, however I am still having issues getting the images to not have whitespace next to them for the mobile phone sized screen

Comment posted by Revti Shah

Your structure of HTML is too messy. I will modify it. Hope you don’t mind.

Comment posted by Marcooz2007

Oh wow that seems to have fixed it, although I’m not quite sure why! Could you explain what I was doing wrong and why this fixed it? I will also have a read of your hyperlink. Thank you 🙂

Comment posted by Marcooz2007

I have removed this and now the picture is huge, going right off the screen. This is despite the styling for the picture being: .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; } Why does it not have a width of 45% or a max width of 100% as per the CSS?

Comment posted by RustyBadRobot

Just add new css to constrain img within these divs, edited answer above.

Comment posted by Marcooz2007

Hi Rusty, thanks for helping, this has indeed fixed it for the laptop size – however I still have the same whitespace issue when viewing from a phone sized screen – any ideas why this is and how to fix it?

By

Related Post

HTML

[ANSWERED] html – Trying to align a div to the right using CSS

Nov 20, 2022
HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022