0

I got a small problem, I want to float 3 sections next to each other but for some reasons (using bootstrap class col-md-4) the 3rd section spills over to the next line when adding any margin-right, how can I fix this? https://jsfiddle.net/rpu6szv0/ `

<section id="FirstSection"  class="col-md-4  col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Chicken</h3>
dummy text


<a href="#Page-Header">Back To top</a>
</section>
<section id="SecondSection" class="col-md-4  col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Beef</h3>
    dummy text

<a href="#Page-Header">Back To top</a>
</section>

<section id="ThirdSection"  class="col-md-4  col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Sushi</h3>
    dummy text

<a href="#Page-Header">Back To top</a>
</section>
</div>`

Zoomed Out 3 sections

2
  • 1
    Thanks for providing a fiddle. When I try it the sections end up vertically one above the other, not like your image. Is there some other stuff that should be included (you mention bootstrap)? Edit: I've just seen @Rounin's answer - flex is a good way to go nowadays.
    – A Haworth
    Sep 11, 2020 at 18:59
  • margin-right:1px is your trouble , remove it : jsfiddle.net/y9px6z1q
    – G-Cyrillus
    Sep 11, 2020 at 19:35

3 Answers 3

2

I want to float 3 sections next to each other

A more advanced and more modern alternative to float is flexbox.

You can think of flexbox as float with superpowers.


Historical Note: The Twitter Bootstrap framework was launched in 2011, several years before CSS Flexbox was finalised.

It's true that Bootstrap made it easier to achieve certain layouts in CSS than approaches available in 2011.

But, as Wikipedia states:

In the 2010s, the intensive use of popular JavaScript layout frameworks, such as Bootstrap, inspired CSS flex-box and grid layout specifications.

Source: https://en.wikipedia.org/wiki/CSS_Flexible_Box_Layout#History

Today, CSS Flexbox (and CSS Grid) make it even easier to achieve those layouts than Bootstrap does.


In the example below, I have:

  • given the parent (in this case, body) a display: flex
  • given the children (in this case, section) a flex: 1 1 33%

The second property is crucial.

flex is a shorthand property which indicates:

  • the rate at which the element may grow (in this case, 1)
  • the rate at which the element may shrink (in this case, 1)
  • the initial width (in this case, 33%)

This means, that, all else being equal, the element will take up 33% of the available space (in this case, the width of body) but if you add padding, borders, margins etc. the element can shrink, so that the row of elements doesn't end up taking up more than the available space.


Working Example:

body {
  display: flex;
}

section {
  flex: 1 1 33%;
  text-align: center;
}
<section id="FirstSection">
<h3>Chicken</h3>
<p>dummy text</p>
<p><a href="#Page-Header">Back To Top</a></p>
</section>

<section id="SecondSection">
<h3>Beef</h3>
<p>dummy text</p>
<p><a href="#Page-Header">Back To Top</a></p>
</section>

<section id="ThirdSection">
<h3>Sushi</h3>
<p>dummy text</p>
<p><a href="#Page-Header">Back To Top</a></p>
</section>

6
  • 1
    This indeed helps to fix my problem, partially. I still need them to have different width at different breakpoints, for example when it reaches a specific pixel width I want the sections to be in a different shape i.e: 2 sections in 1 row and the 3rd section in a whole row
    – Kermit
    Sep 11, 2020 at 19:35
  • Yep, for this you can use CSS @media queries like @media only screen and (max-width: 868px) { [... Your CSS for 2 sections in 1 row and the 3rd section in a whole row Here...] } Sep 11, 2020 at 20:09
  • so I'm gonna have to manually identify each column width inside media queries and add that class to the element, right?
    – Kermit
    Sep 11, 2020 at 20:12
  • You will, yep - though if the same percentage-based widths apply to multiple classes, you'll only need to write out those widths once: .class-1, .class-3 { [... Percentage-based width applying to .class-1 & .class-3...] } It's certainly not a bad idea to give most of your elements an individual class or id anyway - but you've already done this with your ids so you're ahead of the game. Sep 11, 2020 at 20:18
  • Problem is if I manually specify width for each column I'm basically not using bootstrap's columns and I need to be using bootstrap classes specially the columns, is there any other way?
    – Kermit
    Sep 11, 2020 at 20:24
0

The most effective solution is to keep col-md-3 for all sections and use offset-md-1 for spacing

4
  • 1
    Yes but I don't get why won't they all float-left, they are of the same width and I have already specific box-sizing to be border box, so it should be fixed by itself, shouldn't it?
    – Kermit
    Sep 11, 2020 at 18:53
  • @Kermit box-sizing includes border and padding, not margins. remove the margin : jsfiddle.net/y9px6z1q
    – G-Cyrillus
    Sep 11, 2020 at 19:35
  • @G-Cyrillus That's the whole point, I'm trying to have some space between each section but it won't allow it, I think it barely fits to add a margin. Is there anyway around it?
    – Kermit
    Sep 11, 2020 at 19:43
  • @Kermit you can use the class col instead col-x getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns , i made an answer with a demo snippet.
    – G-Cyrillus
    Sep 11, 2020 at 19:59
0

from your comment

@G-Cyrillus That's the whole point, I'm trying to have some space between each section but it won't allow it, I think it barely fits to add a margin. Is there anyway around it?

if ad margin , the col-x classes sizing your columns should be dropped for a plain col class , which will grow inside the sroom left for it . Instead col-md-4 , you can use the class col-md for the second column, it will grow and shrink to fit in between the 2 others and allow you to add margins :

example

* {
  box-sizing: border-box;
}

#FirstSection,
#SecondSection,
#ThirdSection {
  font-size: 120%;
  font-weight: bold;
  background-color: #C0C0C0;
  height: 1700px;
  margin-right: 10px;
  overflow: auto;
  margin-left: auto;
  padding: 10px;
  clear: none;
}

.SectionHeader {
  font-size: 1.5em;
  font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <section id="FirstSection" class="col-md-4  col-sm-12 col-xs-12">
      <h3 class="SectionHeader text-center">Chicken</h3>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
      Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
      Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
      mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
      metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis
      arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.


      <a href="#Page-Header">Back To top</a>
    </section>
    <section id="SecondSection" class="col-md  col-sm-12 col-xs-12">
      <h3 class="SectionHeader text-center">Beef</h3>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
      Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
      Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
      mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
      metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis
      arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.

      <a href="#Page-Header">Back To top</a>
    </section>
    <section id="ThirdSection" class="col-md-4  col-sm-12 col-xs-12">
      <h3 class="SectionHeader text-center">Sushi</h3>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
      Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
      Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
      mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
      metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.

      <a href="#Page-Header">Back To top</a>
    </section>
  </div>
</div>

see : https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.