What is the best way to align 3 divs next to each other with spacing and borders?

I'm having trouble aligning three divs side by side. When I try to add borders and a small gap between each div, the third div ends up on a new line. Is there a way to automatically resize the divs so they fit together?

HTML:

  <div class="trendingContainer">
      <div class="col-lg-4 trendingBox">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
        <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
      <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
</div>

CSS:

.trendingContainer {
    margin: 0 auto;
}
.trendingBox {
    border: 1px solid #e5e5e5;
    background: #fff;
    margin: 0 2px 0 0;
}
htmlcsstwitter-bootstrap

Answer №1

If you're looking to create responsive designs, consider using calc and percentage based widths:

.trendingBox {
    border: 1px solid #e5e5e5;
    background: #fff;
    margin: 0 2px 0 0;
    width: calc(100% / 3 - 4px);
}

To cater to different browser widths effectively, utilize media queries in your CSS:

@media(max-width: 600px) {
    .trendingBox {
        border: 1px solid #e5e5e5;
        background: #fff;
        margin: 0 2px 0 0;
        width: calc(100% / 2 - 4px);
    }
}

@media(min-width: 601px) {
    .trendingBox {
        border: 1px solid #e5e5e5;
        background: #fff;
        margin: 0 2px 0 0;
        width: calc(100% / 3 - 4px);
    }
}

Answer №2

To achieve the desired layout, you have the option to use either the float or flex model. Just ensure that the border-box property is set. Also, when incorporating margin in a fixed layout like this, make sure the widths are properly adjusted:

* {
  box-sizing: border-box;
}
.trendingContainer {
  margin: 0 auto;
  overflow: hidden;
}

.trendingBox {
  border: 1px solid #e5e5e5;
  background: #fff;
  float: left;
  width: 30%;
  margin: 0 0.5%
}
<div class="trendingContainer">
  <div class="col-lg-4 trendingBox">
    <div class="block-title">
      <h3>Trending</h3>
    </div>
    123
  </div>
  <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
    <div class="block-title">
      <h3>Trending</h3>
    </div>
    123
  </div>
  <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
    <div class="block-title">
      <h3>Trending</h3>
    </div>
    123
  </div>
</div>

Preview

https://i.stack.imgur.com/AURK4.png

Answer №3

Let's take another shot at this, with a completely different approach. I've introduced a child DIV to specify the content along with margin and border:

(This approach keeps the original sizing and other Bootstrap features intact, while segregating the additional styling in a separate div for cleaner usage)

HTML:

<div class="trendingContainer">
    <div class="col-lg-4 trendingBox">
        <div class="trendingBox-content">
            <div class="block-title"><h3>Trending</h3> </div>
            123
        </div>
    </div>

    <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="trendingBox-content">
            <div class="block-title"><h3>Trending</h3> </div>
            123
        </div>
    </div>

    <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="trendingBox-content">
            <div class="block-title"><h3>Trending</h3> </div>
            123
        </div>
    </div>
</div>

CSS:

.trendingContainer {
    margin: 0 auto;
}
.trendingBox {
    /* Add custom styles here */
}
.trendingBox-content{
    border: 1px solid #e5e5e5;
    margin: 0 2px 0 0;
    background: #fff;
}

Answer №4

Give this a shot.

.trendingContainer {
    margin: 0 auto;
}
.trendingBox {
    border: 1px solid #e5e5e5;
    display: inline-block;
    position: relative;
    float: left;
    background: #fff;
    margin: 0 2px 0 0;
}
<div class="trendingContainer">
      <div class="col-lg-4 trendingBox">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
        <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="block-title"><h3>Trending Big</h3> </div>
        123
      </div>
      <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
</div>

Answer №5

.trendingBox { 
    border: 1px solid #e5e5e5;  
    background: #fff; 
    margin: 0 2px 0 0; 
    display: inline-block;
    float: left;
    width: calc(33.3% - 4px);
}
  1. The usage of calc in CSS3 is quite innovative.
  2. For the 4px calculation, it encompasses 2px for margin and 2*1px for border.
  3. A different approach could be implementing outline which may affect the box element's width.

All other aspects seem to be straightforward.

Answer №6

.trendingBox {
    border: 1px solid #e5e5e5;
    background: #fff;
    margin: 0 2px 0 0;
    box-sizing: border-box;
}

The use of box-sizing: border-box; in this code snippet is crucial as it ensures that the div's size remains constant even when padding is added to it.

Note: Check out my alternative answer for a more recommended approach.

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

Trouble encountered in aligning two DIVs in a horizontal position

I have been through numerous discussions on the same problem, but none of the solutions seem to work in my case. I am currently working on a section of my website that has 3 small boxes, each containing an image on top and text below. The issue arises when ...

csshtml

Allow the content to be scrolled

When it comes to my CSS script, I encounter no issues on larger computer screens. However, users with smaller resolutions like 1024 x 768 are experiencing problems viewing the entire HTML page. Only half of the page is displayed, making it impossible for t ...

htmlcss

What is the most effective method to arrange absolute divs generated randomly in a grid-like formation?

Hey there! I'm facing an intriguing challenge with my app. It's designed to generate a variable number of divs which are always in absolute positioning. Unfortunately, making them relative is not an option due to some other factors within the app ...

javascripthtmlcss

Issue with AngularJS URLs not functioning properly when using HTML5 mode

Utilizing the AngularJS SPA template in Visual Studio. In my app.js file, I have the following code: $stateProvider .state('touranalysis', { url: '/touranalysis', templateUrl: '/views/touranalysis/index', ...

htmlangularjs

The value of the variable is failing to be included in the Ajax request being sent to the server via jQuery

I'm encountering an issue with my contact form where I can't seem to retrieve the $_POST values via ajax for saving to a text file. It seems like there might be a problem with my javascript code. Check out the jQuery code snippet below: functio ...

phpjqueryhtmlajax

Unable to open fancybox from a skel-layer menu

Seeking assistance with integrating a Fancybox inline content call from a Skel-layer menu (using the theme found at ) <nav id="nav"> <ul> <li><a href="#about1" class="fancybox fancybox.inline button small fit" >about< ...

javascriptphpjqueryhtmlfancybox

Generate a div dynamically and incorporate a function that triggers on click event dynamically

In my current project, I am faced with a challenge due to laziness. My goal is to automatically generate menu buttons that are linked to different sections of a page using raw JavaScript. The issue arises when the body content of my site is loaded from an ...

javascripthtml

Nested Property Binding in CallByName

I am looking to utilize CallByName in VBA to extract specific data from various webpages with differing html structures. In my scenario, I need to reference multiple parent nodes to access an element with or tags. Here is an example of the code: The eleme ...

htmlvbacallbyname

Using only CSS to swap out periods in OL>LI elements for a different style

Is there a way to customize the punctuation used in lists in HTML and CSS? For instance, can the standard period at the end of list items be changed to a right parenthesis or removed altogether? Concept Below is an example of improper CSS attempting to a ...

htmlcssstyleshtml-lists

Strange Behavior of SVG 'fill: url(#....)' in Firefox

I am struggling with an SVG graphic that I have created. Here is the code: <svg width='36' height='30'> <defs> <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" s ...

cssfirefoxsvggradientfill

Tips for creating two lines of text within one line using CSS

My explanation skills are not the best. I have the words "Tasty Burger" stacked on top of each other, but I want them to be on a single line. .footer-container { margin: 25px 0; display: flex; gap: 3rem; align-items: center; justif ...

htmlcssflexbox

Having issues with object-fit: cover not functioning properly in Safari browser

Encountering a browser support issue at the moment. Everything is functioning as expected on Firefox and Chrome, but Safari is causing problems with images. Currently, the image size is set using "object-fit: cover" and working properly on Chrome/Firefox. ...

csssafaricross-browser

Adjust the HTML 5 range slider to update according to the selected value

Is it possible to create a custom marker on an HTML5 range input element? I'm looking for a way to change the design of the circle marker as it moves along the scale from 1 to 10. Specifically, I want to change the color of the marker based on its po ...

javascriptjqueryhtmlcssrange

What is the best way to display form input fields depending on the selected value?

I've been struggling with a seemingly simple issue that I can't seem to find the right solution for, even after scouring Google. I have a form field for input and a select field with various values, including an "Other" option. Here's what ...

javascriptjqueryhtmljsp

How can we use Python and Selenium to retrieve the text from HTML that includes the <p> tag?

I have a simple question that I hope you can help me with. I'm not feeling well and struggling to complete my presentation because my brain just isn't functioning properly. Here is the HTML code in question: <p> <b>Postal code:& ...

pythonhtmlpython-3.xselenium

Altering the properties of every item within a v-for loop's array

I'm currently exploring Vue's approach to writing JavaScript. Let's consider this situation: In the .vue template <button v-on:click="biggerFont()" class="btn btn-s btn-default" type="button" name="button">A</button> < ...

javascriptcsseventsvue.js

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Currently, I am utilizing a script to fetch data from a Google Sheet $.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) { var sheetData = data.feed.entry; va ...

javascriptjqueryhtml

What could be causing such a significant impact on the row height in a CSS table when a tiny image is inserted next to an input box?

Currently, I am facing a unique challenge while setting up a form using CSS tables. The issue is best explained through a fiddle: http://jsfiddle.net/GdgV4/6/ In the third row, you'll notice that adding an image with a height less than the input box ...

htmlcsscss-tables

Tips for switching a group of buttons within a userscript by clicking a single button?

Apologies if my wording is not clear, allow me to clarify. I am in the process of developing a userscript that will display a set of buttons below a main button when clicked. These additional buttons will serve different functions and should disappear whe ...

javascripthtmljquerycssuserscripts

Managing the vertical dimensions of a div

I've created a unique set of visually appealing cards that house meaningful messages within an infinite scrolling feed. The intended functionality is for the complete message to be displayed upon clicking a "more" button, as the messages are typically ...

htmlcssangular