CODEWITHSUNDEEP
html
Dom
Dom

Reputation: 15

4 images in a row with 3 rows total

I'm having trouble getting 4 images in a row with 3 rows. The title should be sitting directly below the image. I had it working originally until I added the title. Now I can't get the page to behave right. Below is my code. Here's a url to see this code in action. http://bakersfieldtopagents.com/zipcode-search/. The images just keep displaying one on top of the other.

<style>
.zipcodeboximage img {height:100%; width:100%; max-height:200px; max-width:300px; padding-right:10px; padding-left:10px; display:inline-block;}
.zipcodeboxtitle {background-color:#0F0A42; color:#FFFFFF; line-height: 1; font-size: 1.6em; text-align:center; font-family: sans-serif; max-width:280px; width:100%; margin-top:0px; margin-left:10px; padding:10px;}
</style>

<div style="zipcodebox">
  <div class="zipcodeboximage"><img src="image" alt="zipcode"></div>
  <div class="zipcodeboxtitle">AREA TITLE</div>
</div>
<div class="zipcodebox">
  <div class="zipcodeboximage"><img src="image" alt="zipcode"></div>
  <div class="zipcodeboxtitle">AREA TITLE</div>
</div>
<div class="zipcodebox">
  <div class="zipcodeboximage"><img src="image" alt="zipcode"></div>
  <div class="zipcodeboxtitle">AREA TITLE</div>
</div>
<div class="zipcodebox">
  <div class="zipcodeboximage"><img src="image" alt="zipcode"></div>
  <div class="zipcodeboxtitle">AREA TITLE</div>
</div>
<div class="zipcodebox">
  <div class="zipcodeboximage"><img src="image" alt="zipcode"></div>
  <div class="zipcodeboxtitle">AREA TITLE</div>
</div>
<div class="zipcodebox">
  <div class="zipcodeboximage"><img src="image" alt="zipcode"></div>
  <div class="zipcodeboxtitle">AREA TITLE</div>
</div>
<div class="zipcodebox">
  <div class="zipcodeboximage"><img src="image" alt="zipcode"></div>
  <div class="zipcodeboxtitle">AREA TITLE</div>
</div>
<div class="zipcodebox">
  <div class="zipcodeboximage"><img src="image" alt="zipcode"></div>
  <div class="zipcodeboxtitle">AREA TITLE</div>
</div>
<div class="zipcodebox">
  <div class="zipcodeboximage"><img src="image" alt="zipcode"></div>
  <div class="zipcodeboxtitle">AREA TITLE</div>
</div>
<div class="zipcodebox">
  <div class="zipcodeboximage"><img src="image" alt="zipcode"></div>
  <div class="zipcodeboxtitle">AREA TITLE</div>
</div>
<div class="zipcodebox">
  <div class="zipcodeboximage"><img src="image" alt="zipcode"></div>
  <div class="zipcodeboxtitle">AREA TITLE</div>
</div>
<div class="zipcodebox">
  <div class="zipcodeboximage"><img src="image" alt="zipcode"></div>
  <div class="zipcodeboxtitle">AREA TITLE</div>
</div>

Upvotes: 1

Views: 56

Answers (2)

Will
Will

Reputation: 2191

divs are block elements which means they want to fill the width of their parent, you need to change that to get the desired result.

.zipcodebox { display:inline-block }

Will give you what you need. Also, pay attention to your attributes; style="zipcodebox" is not the same thing as class="zipcodebox".

Upvotes: 1

DrOliver
DrOliver

Reputation: 26

If you just need a static structure of 4x3, one way can be to incapsulate in three div four of your zipcodebox and add a display:flex to the style of those div.

Then you can do wathever you want, you'll keep the given layout.

Quite a fast and simple solution, but it works.

Upvotes: 0

Related Questions