Andrew Karpati Andrew Karpati -3 years ago 92
CSS Question

How to make 3 equal square divs that fits the screen?

I'm programming a blog website for my sister, but I got into a problem I can't solve..

I would like to make her site look like the following:

the posts should be inside square divs, and one row 3 divs. But I'm not able to do that. I would like to make it expand and fit the screen, with margins. (like in the following website: https://www.chloefromthewoods.com/)

I have the following code:

<div id="mainDiv">
<div id="posts">
<div id="post1" class="post">
<div class="postDiv" style="background-image: url(img1.JPG)">
Post...
</div>
</div>
<div id="post2" class="post">
<div class="postDiv" style="background-image: url(img2.JPG)">
Post...
</div>
</div>
<div id="post3" class="post">
<div class="postDiv" style="background-image: url(img3.JPG)">
Post...
</div>
</div>
</div>
</div>


CSS:

#mainDiv
{
max-width: 100%;
width: auto;
min-width: 800px;
min-height: 100px;
height: auto;

margin: 0 auto 300px auto;

overflow: hidden;
}
#posts
{
width: auto;
height: auto;
min-height: 100px;
background: #ffffff;
}

.post
{
/* Make it square and fit the screen */
width: 33%;
height: 33%;

display: inline-block;
float: left;
}
.postDiv
{
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
}


But it's not working..: IMAGE

JSFIDDLE: https://jsfiddle.net/9qs34mgw/1/

Answer Source

The easiest way to get squares is to use the padded box trick: set height: 0; padding-bottom: 30%; on the individual posts (items) - this assumes margin-left: 5%; Vertical padding is based on parent's width, so padding-bottom: 100% would make the post divs grow to the same height as the parent's width. Setting the bottom padding to 30% makes the box grow to 100% of the width of the box, making a square. Set display: inline-block; on the items and font-size: 0 on the parent div to remove the excess pixels added by using inline-block.

* {
  box-sizing: border-box;
}
#mainDiv
{
    max-width: 100%;
    width: auto;
    min-width: 800px;

    margin: 0 auto 300px auto;

    overflow: hidden;
}
#posts {
    width: 100%;
    font-size: 0;
    }
    
    .post {
      display: inline-block;
      width: 30%;
      font-size: 1rem;
    margin-left: 5%;
      height: 0;
    padding-bottom: 30%;
    background-position: center center;
    background-size: cover;


    }

.post:first-child {
     background: green;
     margin-left: 0;
   }

.post:nth-child(2) {
  background: blue;
}

.post:nth-child(3) {
    background: red;
    }
.postDiv
{
    padding: 20px;
    width: 100%;
}
<div id="mainDiv">
<div id="posts">
            <div id="post1" class="post">
                <div class="postDiv">
                    A bit longer post
                </div>
            </div>
            <div id="post2" class="post">
                <div class="postDiv">
                    Post Post
                </div>
            </div>
            <div id="post3" class="post">
                <div class="postDiv">
                    Post...
                </div>
            </div>
</div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download