I have Created four cards in a same line in my html page.But when I resize(decrease window size) my window, the cards which are in right corner are going down.they don't stay in a line.How can I keep my all cards in a same line even if I resize my window?

<div class="tab1cards">
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px;">
                    <h4><b>Wild Life</b></h4>
                </div>
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px">
                    <h4><b>Heritage</b></h4>
                </div>
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px">
                    <h4><b>Beach</b></h4>
                </div>
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px">
                    <h4><b>Sri lanka</b></h4>
                </div>
            </div>

this is style sheet

.card{
    float: left;
    padding: 16px;
    text-align: center;
}

I have Created four cards in a same line in my html page.But when I resize(decrease window size) my window, the cards which are in right corner are going down.they don't stay in a line.How can I keep my all cards in a same line even if I resize my window?

<div class="tab1cards">
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px;">
                    <h4><b>Wild Life</b></h4>
                </div>
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px">
                    <h4><b>Heritage</b></h4>
                </div>
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px">
                    <h4><b>Beach</b></h4>
                </div>
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px">
                    <h4><b>Sri lanka</b></h4>
                </div>
            </div>

this is style sheet

.card{
    float: left;
    padding: 16px;
    text-align: center;
}

• javascript
• html
• css

• use flex and flex direction – Bhavya Singh Commented Mar 6, 2020 at 5:07
• @BhavyaSingh it worked.thank you – Jeewantha Lahiru Commented Mar 6, 2020 at 5:09
• Kindly mark the answer as accepted – Bhavya Singh Commented Mar 6, 2020 at 5:11

2 Answers 2

.card {
  padding: 16px;
  text-align: center;
}

.tab1cards {
  display: flex;
  flex-direction: row;
}

<div class="tab1cards">
  <div class="card">
    <img src="safari.jpg" alt="safari" style="width: 250px;">
    <h4><b>Wild Life</b></h4>
  </div>
  <div class="card">
    <img src="safari.jpg" alt="safari" style="width: 250px">
    <h4><b>Heritage</b></h4>
  </div>
  <div class="card">
    <img src="safari.jpg" alt="safari" style="width: 250px">
    <h4><b>Beach</b></h4>
  </div>
  <div class="card">
    <img src="safari.jpg" alt="safari" style="width: 250px">
    <h4><b>Sri lanka</b></h4>
  </div>
</div>

This code will solve the problem and align them into a single row.

You can use flex like this. Here is working example https://jsfiddle/fyckzuhL/

.tab1cards{
 display:flex;
  flex-direction:row;
  justify-content:space-between;
}