Struggling to resize four images inside a div as the browser window is resized? Frustrated that when the window is too small, the last image moves to the next row? Want them all to stay in one row? Despite searching for solutions, adjusting max-widths to 24%, and setting body limits at 1900px max and 700px min – nothing seems to work! Here's the code:
HTML:
<br>
<div id="contain">
<img src="webphoto6.jpg" alt="Mary" class="one">
<img src="webphoto3.jpg" alt="Mary" class="two">
<img src="webphoto42.jpg" alt="Mary" class="three">
<img src="WebPhoto.jpg" alt="Mary" class="four">
</div>
<div id="clearfix">
<br>
CSS:
#contain { max-width: 1900px;
min-width: 780px;
display: block;
}
img { width: auto;
height: auto;
width: auto\9;
}
.one {float: left;
max-width: 24%;
max-height: auto;
padding-right:20px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.two {float: left;
max-width: 24%;
max-height: auto;
padding-right: 20px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.three { float: left;
max-width: 24%;
max-height: auto;
padding-right: 20px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.four {float: left;
max-width: 24%;
max-height: auto;
padding: 0px;
margin: 0px;
}
#clearfix {clear: both;}
Your assistance would be greatly appreciated!