Creating evenly spaced columns within a structure

Question

Creating evenly spaced columns within a structure

Is there a way to create 3 equal columns in HTML5 without using tables? I'm having trouble achieving the desired result:

https://i.sstatic.net/AJIA3.png

The issue is that one of the columns doesn't look like the other two, even though they all have the same CSS applied to them.

https://i.sstatic.net/fb2vl.png

Any ideas on how to fix this? I am currently using a Bootstrap template for this website.

#refGan {
  display: inline-block;
  width: 193px;
  background-color: #F2F2F2;
  height: 378px;
  margin-right: 90px;
}

#refGan img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-bottom: 20px;
}

#refGan h3 {
  font-family: Miso;
  text-align: center;
  color: #A53D3E;
  font-weight: bold;
}

#refGan hr {
  width: 30px;
  position: center;
  color: #f00;
  background-color: #A53D3E;
  height: 5px;
}

#refGan p {
  font-family: 'Varela Round', sans-serif;
  font-size: 15px;
  color: black;
}

#refGan label {
  float: left;
  background: url(../pictures/button.png);
  background-repeat: no-repeat;
  background-size: 129px 30px;
  font-size: 12px;
}

<section id="refGan">
  <h3>Romance</h3>
  <hr>
  <div><img src="pictures/romantic anime.jpg" width="173" height="99" /></div>
  <p>
    This genre focuses on couples and love stories. It's very popular among young girls and has a special name in Japan: "Shoujo".
  </p>
  <label>
                        Recommended Shows
                    </label>
</section>
<section id="refGan">
  <h3>
    Action
  </h3>
  <hr>
  <div><img src="pictures/action anime.jpg" width="173" height="99" /></div>
  <p>
    A classic genre that usually combines martial arts and a central hero. It's very popular among young boys and has a special name in Japan: "Shounen".
  </p>
  <label>
                        Recommended Shows
                    </label>
</section>
<section id="refGan" class="marcoCol">
  <h3>Adventure</h3>
  <hr>
  <div><img src="pictures/adventure anime.jpg" width="173" height="99" /></div>
  <p>
    The genre known by everyone! It even reaches countries beyond Japan. Includes series like: Heidi and Nils Holgersson. What characterizes it, of course, are the adventures of the main hero.
  </p>
  <label>
                        Recommended Shows
                    </label>
</section>

html css

Answer 1

Answer №1

Wrapping your sections in a div

 <div style="display: flex;">

This solution should resolve your issue, and I have also made additional adjustments to ensure responsiveness. By doing so, you won't need to hard code widths and margins.

#refGan {
    display: inline-block;
    width: 30%;
    background-color: #F2F2F2;
    height: 378px;
}

#refGan img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom:20px;
}

#refGan h3 {
    font-family: Miso;
    text-align: center;
    color: #A53D3E;
    font-weight: bold;
}
#refGan hr{
    width: 30px;
    position: center;
    color: #f00;
    background-color: #A53D3E;
    height: 5px;
}
#refGan p{
    font-family: 'Varela Round', sans-serif;
    font-size: 15px;
    color: black;
}

#refGan label {
    float: left;
    background: url(../pictures/button.png);
    background-repeat: no-repeat;
    background-size: 129px 30px;
    font-size: 12px;
}

 <div style="display: flex;justify-content: space-around;">
<section id="refGan">
<h3>רומנטיקה</h3>
<hr>
<div><img src="pictures/romantic anime.jpg" width="173" height="99" /></div>
<p>
זה בדיוק איך שזה נשמע. בסדרות מסוג זה העלילה היא סביב זוג שמתאהבים. הז'אנר הזה מאוד פופולארי בקרב נערות צעירות וביפנית יש לו שם מיוחד: "שוג'ו".
</p>
<label>
לסדרות מומלצות
</label>

</section>
<section id="refGan">
<h3>
אקשן
</h3>
<hr>
<div><img src="pictures/action anime.jpg" width="173" height="99" /></div>
<p>
ז'אנר קלאסי שמשלב בדרך כלל אומנויות לחימה וגיבור מרכזי אחד. הז'אנר הזה מאוד פופולארי בקרב נערים צעירים וביפנית יש לו שם מיוחד: "שונן".
</p>
<label>
לסדרות מומלצות
</label>
</section>
<section id="refGan" class="marcoCol">
<h3>הרפתקאות</h3>
<hr>
<div><img src="pictures/adventure anime.jpg" width="173" height="99" /></div>
<p>
הז'אנר המוכר מכולם! הוא אפילו חדר למדינות מעבר ליפן. כולל בתוכו סדרות כמו: הלב (מרקו) ונילס הולגרסון. מה שמאפיין אותו, כמובן, זה ההרפתקאות של הגיבור הראשי.
</p>
<label>
לסדרות מומלצות
</label>
</section>
</div>

Answer 2

Wrapping your sections in a div

 <div style="display: flex;">

This solution should resolve your issue, and I have also made additional adjustments to ensure responsiveness. By doing so, you won't need to hard code widths and margins.

#refGan {
    display: inline-block;
    width: 30%;
    background-color: #F2F2F2;
    height: 378px;
}

#refGan img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom:20px;
}

#refGan h3 {
    font-family: Miso;
    text-align: center;
    color: #A53D3E;
    font-weight: bold;
}
#refGan hr{
    width: 30px;
    position: center;
    color: #f00;
    background-color: #A53D3E;
    height: 5px;
}
#refGan p{
    font-family: 'Varela Round', sans-serif;
    font-size: 15px;
    color: black;
}

#refGan label {
    float: left;
    background: url(../pictures/button.png);
    background-repeat: no-repeat;
    background-size: 129px 30px;
    font-size: 12px;
}

 <div style="display: flex;justify-content: space-around;">
<section id="refGan">
<h3>רומנטיקה</h3>
<hr>
<div><img src="pictures/romantic anime.jpg" width="173" height="99" /></div>
<p>
זה בדיוק איך שזה נשמע. בסדרות מסוג זה העלילה היא סביב זוג שמתאהבים. הז'אנר הזה מאוד פופולארי בקרב נערות צעירות וביפנית יש לו שם מיוחד: "שוג'ו".
</p>
<label>
לסדרות מומלצות
</label>

</section>
<section id="refGan">
<h3>
אקשן
</h3>
<hr>
<div><img src="pictures/action anime.jpg" width="173" height="99" /></div>
<p>
ז'אנר קלאסי שמשלב בדרך כלל אומנויות לחימה וגיבור מרכזי אחד. הז'אנר הזה מאוד פופולארי בקרב נערים צעירים וביפנית יש לו שם מיוחד: "שונן".
</p>
<label>
לסדרות מומלצות
</label>
</section>
<section id="refGan" class="marcoCol">
<h3>הרפתקאות</h3>
<hr>
<div><img src="pictures/adventure anime.jpg" width="173" height="99" /></div>
<p>
הז'אנר המוכר מכולם! הוא אפילו חדר למדינות מעבר ליפן. כולל בתוכו סדרות כמו: הלב (מרקו) ונילס הולגרסון. מה שמאפיין אותו, כמובן, זה ההרפתקאות של הגיבור הראשי.
</p>
<label>
לסדרות מומלצות
</label>
</section>
</div>

Answer 3

Answer №2

For those using bootstrap make sure to replace your HTML with:

<div class="container">
<section id="refGan" class="float-left col-xs-12 col-lg-4">
                <h3>Romance</h3>
                <hr>
                <div><img src="pictures/romantic anime.jpg" width="173" height="99" /></div>
                <p>
                    This genre revolves around couples falling in love. It is very popular among young girls and is called "Shoujo" in Japanese.
                </p>
                <label>
                    Recommended series
                </label>
            </section>
            <section id="refGan" class="float-left col-xs-12 col-lg-4">
                <h3>Action</h3>
                <hr>
                <div><img src="pictures/action anime.jpg" width="173" height="99" /></div>
                <p>
                    A classic genre that usually combines martial arts and a central hero. It is very popular among young boys and is called "Shounen" in Japanese.
                </p>
                <label>
                    Recommended series
                </label>
            </section>
            <section id="refGan" class="marcoCol float-left col-xs-12 col-lg-4">
                <h3>Adventure</h3>
                <hr>
                <div><img src="pictures/adventure anime.jpg" width="173" height="99" /></div>
                <p>
                    The most recognized genre of all! It has even crossed borders into countries beyond Japan, including series like Marco and Nils Holgersson. What defines it, of course, is the adventures of the main hero.
                </p>
                <label>
                    Recommended series
                </label>
            </section>
        </div>

Make sure to delete this CSS code:

#refGan {
float: left;
width: 25%;
background-color: #F2F2F2;
height: 478px;
margin: 50px;

}

Answer 4

For those using bootstrap make sure to replace your HTML with:

<div class="container">
<section id="refGan" class="float-left col-xs-12 col-lg-4">
                <h3>Romance</h3>
                <hr>
                <div><img src="pictures/romantic anime.jpg" width="173" height="99" /></div>
                <p>
                    This genre revolves around couples falling in love. It is very popular among young girls and is called "Shoujo" in Japanese.
                </p>
                <label>
                    Recommended series
                </label>
            </section>
            <section id="refGan" class="float-left col-xs-12 col-lg-4">
                <h3>Action</h3>
                <hr>
                <div><img src="pictures/action anime.jpg" width="173" height="99" /></div>
                <p>
                    A classic genre that usually combines martial arts and a central hero. It is very popular among young boys and is called "Shounen" in Japanese.
                </p>
                <label>
                    Recommended series
                </label>
            </section>
            <section id="refGan" class="marcoCol float-left col-xs-12 col-lg-4">
                <h3>Adventure</h3>
                <hr>
                <div><img src="pictures/adventure anime.jpg" width="173" height="99" /></div>
                <p>
                    The most recognized genre of all! It has even crossed borders into countries beyond Japan, including series like Marco and Nils Holgersson. What defines it, of course, is the adventures of the main hero.
                </p>
                <label>
                    Recommended series
                </label>
            </section>
        </div>

Make sure to delete this CSS code:

#refGan {
float: left;
width: 25%;
background-color: #F2F2F2;
height: 478px;
margin: 50px;

}

Creating evenly spaced columns within a structure

Answer №1

Answer №2

Similar questions

What is the process for choosing corresponding values in jQuery?

Should I use a tooltip or a pop-up for the tablet version?

How to customize JavaFx context menu appearance using CSS to achieve a full-width background color

Failing to draw an image on a blank canvas

Minimum width of Angular Material's mat-menu

The example in the MUI x-data-grid documentation always seems to fall short of expectations

Style.css remains invisible to NetBeans

Using JQuery, retain only the initial N elements in a list and discard the rest

Retrieve data from a collection by utilizing ng-repeat

I am interested in incorporating a delete button within my Angular application

Is it possible to modify an input using a specific code?

Using jQuery to trigger a Bootstrap modal when a button is clicked

The image is exceeding the boundaries of its parent element, even though a height has been specified

The functionality of the tree grid bootstrap is not functioning properly when it is dynamically generated, but it works seamlessly when implemented statically

AngularJS Multiple Select fails to display preselected options

What is the best way to create a multi-line title within a div element?

Static Sidebar integrated with Twitter Bootstrap version 2.3.5

I am interested in using a loop in Angular to highlight my div element

Having trouble retrieving the image from the /var/www/efs/image/ directory using the html <img src> tag

Tips for switching out images depending on the time of day