0

https://jsfiddle.net/ze1fn4cp/6/

I am practicing HTML/CSS by making a mock up hotel website. In the footer I am trying to create three info boxes alligned equally across the page's width, coded as follows;

HTML:

<footer>
  <section id="footer-boxes">
    <div class="box">
      <i class="fas fa-hotel fa-3x"></i>
      <h2>Great Location</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, natus.</p>
    </div>
    <div class="box bg-orange">
      <i class="fas fa-utensils fa-3x"></i>
      <h2>Free Meals</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, dolor?</p>
    </div>
    <div class="box">
      <i class="fas fa-dumbbell fa-3x"></i>
      <h2>Fitness Room</h2>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut, nihil.</p>
    </div>
  </section>
</footer>

CSS:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.box {
  width: 33.3%;
  height: 250px;
  display: inline-block; 
  text-align: center;
}

.bg-orange {
background: orange;
}

For the CSS I see two methods to make the boxes align equally per the width of the page/ parent section element; give all divs/boxes a width of 33.3% and then 1) Float them to the left, or 2) display them as inline-block to allow them to sit beside each other. The former seems to work nicely, however I am just curious as to why the latter does not. Should it not technically achieve the same thing by changing them to inline-blocks? It seems to push the third div/box down as can be seen in the jsfiddle I linked. Would love some info on this, I am just unsure why this is not achieving the same result. Cheers!

EoghanRyan
  • 1
  • 1
  • well learn modern techniques. using float in combination with inline-block is outdated. float was never supposed to be used for styling a website just for getting pictures inside a textblock and be floated. For that what you try, css-grid or flexboxes are the tools to use. – tacoshy Nov 21 '20 at 19:46
  • @tacoshy I have not learned about those yet, thank you. I am trying to use either of float and inline-block, no both btw. – EoghanRyan Nov 21 '20 at 20:22

0 Answers0