Arranging three section elements side by side

I have encountered an issue where I have 3 consecutive section tags in a row, but when applying margin to them, the last section tag moves to the next line instead of staying on the same line. I attempted using the float:left and display:inline properties, but they did not resolve the problem.

Below is the snippet of my code: 

#main-content h2 {
  color: #000;
  margin-top: 10px;
  margin-bottom: 30px;
}

#main-content section {
  background-color: #6c757d;
  color: #000;
  border: 1px solid #000;
  padding: 0px 0px;
  margin-left: 5px;
  width: 33%;
}

#main-content h3 {
  color: #000;
}

#main-content p {
  font-size: 14px;
}
<div id="main-content" class="container-fluid">
  <h2 class="text-center">Our Menu</h2>
  <div class="row">
    <section class="col-md-4 col-sm-6 col-12 ">
      <h3 class="text-center">Chicken</h3>
      <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
        laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
        vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
        a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
    </section>
    <section class="col-md-4 col-sm-6 col-12">
      <h3 class="text-center">Beef</h3>
      <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
        laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
        vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
        a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
    </section>
    <section class="col-md-4 col-sm-12 col-12">
      <h3 class="text-center">Sushi</h3>
      <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
        laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
        vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
        a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
    </section>
  </div>
</div>

htmlcssbootstrap-4twitter-bootstrap-4-beta

Answer №1

  • Avoid using margin-left and margin-right for columns within a row.

  • Avoid specifying the width for columns as col-* classes already have predefined widths.

    I see why you made that choice. To achieve your desired layout, consider adding a new container element for the section content and apply a background style to it.

.bg-gray {
  background-color: #6c757d;
}

.border-1px-dark {
    border: 1px solid;
}

#main-content p {
  font-size: 14px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div id="main-content" class="container-fluid">
  <h2 class="text-center mt-2 mb-5">Our Menu</h2>
  <div class="row">
    <section class="col-md-4 col-sm-6 col-12 ">
      <div class="bg-gray border-1px-dark p-3">
        <h3 class="text-center">Chicken</h3>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </section>
    <section class="col-md-4 col-sm-6 col-12">
      <div class="bg-gray border-1px-dark p-3">
        <h3 class="text-center">Chicken</h3>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </section>
    <section class="col-md-4 col-sm-12 col-12">
      <div class="bg-gray border-1px-dark p-3">
        <h3 class="text-center">Chicken</h3>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </section>
  </div>
</div>

  • Avoid unnecessary styles like color:000;, as the default text color is black. Use it only if you want a different color than black.

If you need spacing between columns on mobile devices only, use pb-* pb-sm-0 for the sections.

.bg-gray {
  background-color: #6c757d;
}

.border-1px-dark {
    border: 1px solid;
}

#main-content p {
  font-size: 14px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div id="main-content" class="container-fluid">
  <h2 class="text-center mt-2 mb-5">Our Menu</h2>
  <div class="row">
    <section class="col-md-4 col-sm-6 col-12 pb-4 pb-sm-0">
      <div class="bg-gray border-1px-dark p-3">
        <h3 class="text-center">Chicken</h3>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </section>
    <section class="col-md-4 col-sm-6 col-12 pb-4 pb-sm-0">
      <div class="bg-gray border-1px-dark p-3">
        <h3 class="text-center">Chicken</h3>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </section>
    <section class="col-md-4 col-sm-12 col-12 pb-4 pb-sm-0">
      <div class="bg-gray border-1px-dark p-3">
        <h3 class="text-center">Chicken</h3>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </section>
  </div>
</div>

Answer №2

I don't have all your styles. If they do not conflict, the following code will work properly.

<html>
<style>
#main-content h2 {
  color: #000;
  margin-top: 10px;
  margin-bottom: 30px;
}

#main-content section {
  background-color: #6c757d;
  color: #000;
  border: 1px solid #000;
  padding: 0px 0px;
  margin-left: 0.5%;
  width: 32%;
  display:inline-block;
  height: 500px;
  float: left;
}

#main-content h3 {
  color: #000;
}

#main-content p {
  font-size: 14px;
}

.row {
  width: 100%;
  overflow: hidden;
  display:inline;
}
</style>

<body>
  <div id="main-content" class="container-fluid">
  <h2 class="text-center">Our Menu</h2>
  <div class="row">
    <section class="col-md-4 col-sm-6 col-12 ">
      <h3 class="text-center">Chicken</h3>
      <p>LLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie ex odio, eu lobortis libero mollis egestas. Duis porta orci a semper varius. Donec vulputate tellus a neque auctor ultricies. Vivamus sem velit, dictum eu erat vel, consectetur
        laoreet leo. Fusce vitae tortor dolor. Duis semper, leo non sagittis tristique, metus nibh vehicula velit, et maximus ligula ligula id diam. Sed est libero, venenatis eleifend arcu quis, imperdiet porta velit. Suspendisse vulputate aliquam dui,
        vehicula vehicula dui porta sed. Pellentesque ornare nulla tellus, eget gravida magna placerat vel. Ut mollis placerat turpis, eget consectetur sapien porttitor ac. Aenean posuere cursus nibh eu vulputate. Ut sit amet orci posuere, venenatis magna
        a, molestie nibh. Pellentesque id orci porttitor, varius justo sed, luctus eros. Vivamus eu elementum nisl. Maecenas nec lobortis mi. Fusce nec tortor sed sapien fringilla imperdiet nec sed arcu.</p>
    </section>
...
<body>
<div>

Please note: The margin-left: 5px conflicts with width: 33%. When the window width is 900px, three sections will take up 99% of the space, which equals to 891px. The total margins, totaling 15px (3 x 5px), exceed 900px and cause the last section to move to the next row. To prevent this issue, consider using margins in percentage, such as margin-left: 0.5%

Answer №3

When styling with Bootstrap, it is recommended to use div tags instead of hardcoding styles in CSS as it can affect the responsiveness of the site. You can place col classes within the div outside the section tag for better alignment.

For a visual example, you can check out this codepen tutorial on Aligning sections using bootstrap

<div id="main-content" class="container-fluid">
<h2 class="text-center">Our Menu</h2>
<div class="row">
    <div class="col-md-4 col-sm-6 col-12 ">
        <section>
            <h3 class="text-center">Chicken</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </section>
    </div>
    <div class="col-md-4 col-sm-6 col-12 ">
        <section>
            <h3 class="text-center">Beef</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </section>
    </div>
    <div class="col-md-4 col-sm-6 col-12 ">
        <section>
            <h3 class="text-center">Sushi</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </section>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How is it possible for flex-direction to function correctly even when display: flex is not explicitly defined

I'm unsure if it is required to specify the display property when the flex-direction is set in a container. Everything seems to be working fine without it, but I'm concerned that I might be causing issues: .App { background-color: white; ...

cssflexbox

Aligning Content in the Middle of a Bootstrap Column

Can anyone help me with centering the content of a bootstrap column vertically? I'm facing an issue when setting width: 100% and height: 100% for the overlay div. Any solutions? Here is an example image of what I am trying to achieve: https://i.ssta ...

javascriptjqueryhtmlcsstwitter-bootstrap

The implementation of @font-face is failing to display on all currently used web browsers

Hey there, I could really use some help with getting @font-face to work properly. Despite trying numerous solutions, I still seem to be missing something. If anyone can spot what I'm doing wrong, please let me know! @font-face { font-family: " ...

htmlcssfontsfont-face

Enhancing image galleries with filter options via hyperlinks

First and foremost, please excuse my lack of proficiency in English as I attempt to convey my intention: I have incorporated an image gallery into my website where the images are all stored in a database. Each image is assigned a specific category, which ...

phphtmlfilternav

Issue with dropdown menu appearing beneath specific elements in Internet Explorer versions 7 and 8

I've been encountering some troublesome issues with a website I'm working on, specifically in Internet Explorer 7/8. On certain pages, the navigation elements are getting hidden below text and images, causing confusion for me. I've attempted ...

css

Safari CSS issue: Relative parent and child with pseudo selector not producing consistent output across different browsers

I'm not seeking a specific fix for the code, but rather an explanation as to why it behaves this way. In Safari, children elements with a relative parent appear in a different position compared to other browsers. Changing the child to absolute positi ...

htmlcsstwitter-bootstrapsafaricross-browser

When I start scrolling down, the Jumptron background image vanishes

Utilizing bootstrap jumptron with a background image has led to an issue where the background image disappears as I scroll down, leaving only the jumptron div class displaying the heading. How can this be fixed so that the image remains visible even when s ...

javascripthtmlruby-on-railstwitter-bootstrapcss

CSS - borders are overlapping with one another

Encountering an issue where the bottom border is overlapping the right border on the same element. Here's a visual representation of the problem: The green right border's bottom is appearing distorted due to the presence of the gray border at t ...

htmlcss

Toggling the form's value to true upon displaying the popup

I have developed an HTML page that handles the creation of new users on my website. Once a user is successfully created, I want to display a pop-up message confirming their creation. Although everything works fine, I had to add the attribute "onsubmit= re ...

javascripthtmlcssforms

Navigating Divs Using jQuery

I am working with a class that has multiple divs, each with a unique id attached to it. I am using jQuery to dynamically cycle through these divs. This is a snippet of my HTML code: <div id ="result">RESULT GOES HERE</div> ...

javascriptjqueryhtmlcss

Internet Explorer 8 is causing alignment problems with sidebars on certain websites within a Wordpress multisite setup

I am managing a Wordpress multisite setup with the following websites: The main portal: which connects to The issue arises on all pages of gprgebouw.nl and gpradvies.nl but not on the other domains. Attached is a screenshot of the homepage of gprgebouw. ...

csswordpressinternet-explorer-8alignment

Express app unable to retrieve dropdown menu data using Node.js BodyParser

I am currently working on creating a pug file for a signup form and I'm encountering an issue with the drop-down menu not functioning. How can I properly include my drop-down menu in the body parser? I initially assumed it would be processed with json ...

htmlnode.jsexpress

textarea label align: center

I've been struggling to center-align the label for this textarea within the text box, but so far my attempts have failed. The resulting display resembles the following: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx ...

htmlcsstextareavertical-alignment

When the icon is clicked, the text goes over the ul and the mobile slide menu goes beneath it

click here for the image Is there a way to make the text move below when I click on the hamburger menu icon? ...

javascripthtmlcssanimationmobile

Using JavaScript to pass a value from an input field to a href attribute

I am currently working on a scenario where, upon clicking on an input field, the value is passed to a URL and the corresponding radio button is checked. This way, I can share the URL with someone else. Unfortunately, I have hit a roadblock in my progress: ...

javascriptjqueryhtml

What is the best way to design distinct buttons for various devices?

For my current responsive web design project, I have utilized Bootstrap extensively. Recently, I encountered a new issue that I'm uncertain of how to tackle. The problem arises with the following HTML code snippet: <!-- button color depending on d ...

jquerycsstwitter-bootstrapresponsive-design

What is the best way to upload a file without finalizing the form submission?

I have been working on a task to upload a file using ajax and php without refreshing the page when submitting. My code seems to be functioning well and alerts a valid message when I use the preg_match function. However, when I include the rest of the valid ...

phpjqueryhtmlajax

The Ember.run.throttle method is not supported by the Object Function as it does not have a throttle method within the Ember.Mixin

I have a controller that has an onDragEvent function: controller = Em.Object.create( { onDragEvent: function() { console.log("Drag Event"); } }); Additionally, I have a Mixin called 'Event': Event = Ember.Mixin.create( { at ...

javascripthtmlember.js

What is the best way to smoothly switch from one Font Awesome icon to another?

I am working on an HTML button with the following code: <button id="sidebar-toggle-button" class="btn btn-primary header-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample&q ...

htmlcssbootstrap-5font-awesome

.htaccess file is causing js and css files to not load

I followed an MVC tutorial by howcode on YouTube, but I encountered an issue where my CSS and JS files were not loading due to the htaccess configuration. .htaccess file: RewriteEngine On RewriteRule ^([^/]+)/? index.php?url=$1 [L,QSA] I attempted vario ...

javascriptphpcssapache.htaccess