CODEWITHSUNDEEP
htmlcsscss-floatoverflow
Marked as Duplicate
Marked as Duplicate

Reputation: 1249

Float on images breaks overflow

#overflowbox {
  overflow: scroll;
  height: 150px;
  width: 300px;
  white-space: nowrap;
}

img {
  float: left; /* Removing the line fixes the issue & images are on a single line,
                  but I need to keep it to remove the vertical space between images.
                  Using 'font-size: 0' didn't work. */
}
<div id="overflowbox">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100"><br> <!-- It should go on next line from here -->
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
</div>
<!-- The images should be on a single line -->

After some time, I finally found out why my code didn't work. What I tried to do was to have a line of images that were on a single line and made the container they were in overflow. But somewhy, setting a float: left property to the images breaks it, but I need to keep the property in order to remove the vertical space between the images.

Is there some alternative way of doing this to make it work or some kind of a fix?

Upvotes: 0

Views: 158

Answers (2)

j08691
j08691

Reputation: 207891

You don't need to keep the float to remove the gaps between the images; just remove the gaps between the image tags in your code. Inline elements are sensitive to the white space on your code, so remove it.

#overflowbox {
  overflow: scroll;
  height: 150px;
  width: 300px;
  white-space: nowrap;
}
img {
vertical-align:top;
}
<div id="overflowbox">
  <img src="http://via.placeholder.com/100x100"><img src="http://via.placeholder.com/100x100"><img src="http://via.placeholder.com/100x100"><img src="http://via.placeholder.com/100x100"><br><img src="http://via.placeholder.com/100x100"><img src="http://via.placeholder.com/100x100"><img src="http://via.placeholder.com/100x100"><img src="http://via.placeholder.com/100x100">
</div>

Upvotes: 1

miguel-svq
miguel-svq

Reputation: 2176

Check I am trying to remove unwanted space in my header

display:inline-block and float:left for img will work for you.

Upvotes: 0

Related Questions