Html - How can I style three divs side by side with header text above

Chinenye
July 3, 2023
109 views
1 vote
2 Answers

I have a section with a heading with a separator thingy and then 3 divs that are supposed to sit side-by-side. I’ve tried using Flexbox, but that is also putting the text beside them. I want to put the text above but the three divs side by side. An image of my desired output as well as code snippets is included below.

The HTML code:

   <section class="services">
        <h2>Our Services</h2>

        <br>

        <div class="service">
          <img
            src="./images/SVGs/education.jpg"
            alt="Education Logo"
            srcset=""
          />
          <p>IMMIGRATION THROUGH EDUCATION</p>

          <p>
            We work with all Canadian universities and colleges! Study in Canada
            is the most secure way for immigration to Canada
          </p>

          <a href="#form" class="apply">Apply Here</a>
        </div>

        <div class="service">
          <img src="./images/SVGs/business.jpg" alt="Business Logo" srcset="" />

          <p>IMMIGRATION THROUGH BUSINESS</p>

          <p>
            There are lots of immigration programs for business owners. Launch
            your business in Canada!
          </p>

          <a href="#form" class="apply">Apply Here</a>
        </div>

        <div class="service">
          <img
            src="./images/SVGs/employment.jpg"
            alt="Employment Logo"
            srcset=""
          />

          <p>IMMIGRATION THROUGH EMPLOYMENT</p>

          <p>
            There are some application processes that will help you to move to
            Canada permanently through employment streams.
          </p>

          <a href="#form" class="apply">Apply Here</a>
        </div>
      </section>

The Desired Output:

Answers

Maybe you are not giving the flex property to the right element ,
if you want to style them, use this html file and style.css:

 <section class="services">
            <h2>Our Services</h2>  
           <div class="services-content">
 <div class="service">
              <img
                src="./images/SVGs/education.jpg"
                alt="Education Logo"
                srcset=""
              />
              <p>IMMIGRATION THROUGH EDUCATION</p>
    
              <p>
                We work with all Canadian universities and colleges! Study in Canada
                is the most secure way for immigration to Canada
              </p>
    
              <a href="#form" class="apply">Apply Here</a>
            </div>
    
            <div class="service">
              <img src="./images/SVGs/business.jpg" alt="Business Logo" srcset="" />
    
              <p>IMMIGRATION THROUGH BUSINESS</p>
    
              <p>
                There are lots of immigration programs for business owners. Launch
                your business in Canada!
              </p>
    
              <a href="#form" class="apply">Apply Here</a>
            </div>
    
            <div class="service">
              <img
                src="./images/SVGs/employment.jpg"
                alt="Employment Logo"
                srcset=""
              />
    
              <p>IMMIGRATION THROUGH EMPLOYMENT</p>
    
              <p>
                There are some application processes that will help you to move to
                Canada permanently through employment streams.
              </p>
    
              <a href="#form" class="apply">Apply Here</a>
            </div>

</div>
          </section>

style.css:

        section {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
       .services-content {
          display: flex;
          //justify-content: center;
         //align-items: center;
       }

and your div will be fill all the width and your section content in the same line.

#services{
display:flex;
justify-content:space-around;
margin:0 auto;
}

h2{
text-align:center;
}

.service{
border:solid 1px green;
width:250px;
text-align:center;
}

<h2>Our Services</h2>

<section id="services">  

        <div class="service">
          <img
            src="https://placeholder.com/200x100"
            alt="Education Logo"
            srcset=""
          />
          <p>IMMIGRATION THROUGH EDUCATION</p>

          <p>
            We work with all Canadian universities and colleges! Study in Canada
            is the most secure way for immigration to Canada
          </p>

          <a href="#form" class="apply">Apply Here</a>
        </div>

        <div class="service">
          <img src="https://placeholder.com/200x100" alt="Business Logo" srcset="" />

          <p>IMMIGRATION THROUGH BUSINESS</p>

          <p>
            There are lots of immigration programs for business owners. Launch
            your business in Canada!
          </p>

          <a href="#form" class="apply">Apply Here</a>
        </div>

        <div class="service">
          <img
            src="https://placeholder.com/200x100"
            alt="Employment Logo"
            srcset=""
          />

          <p>IMMIGRATION THROUGH EMPLOYMENT</p>

          <p>
            There are some application processes that will help you to move to
            Canada permanently through employment streams.
          </p>

          <a href="#form" class="apply">Apply Here</a>
        </div>
      </section>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can I style three divs side by side with header text above

Answers