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

What is the best way to retrieve classes from arrays and apply styling to them using javascript?

Imagine having 3 unique classes: alpha, beta, and gamma. Each class contains 3 individual div elements like so: <div class="alpha"></div> <div class="alpha"></div> <div class="alpha"></div> <div class="beta">< ...

javascriptjqueryhtmlcssarrays

The width of the Ion-slide is dynamically determined by the styling

After transitioning my Ionic 2 project to Ionic 3, I encountered issues with ion-slides which are affecting my app's functionality. Upon app loading, specific widths are being defined in the style tags on the slides, disrupting the intended styling. ...

cssangulartypescriptsassionic3

What is the best method to eliminate the "All Files" selection from a file input dialog

<input type="file" accept=".jpg"> By setting the accept attribute to ".jpg", the file selection dialog will only allow JPG files. However, some browsers also provide a dropdown menu option for selecting All Files: All Files (*.*). Is there a way to ...

html

Ways to navigate to a different page using HTML response from an AJAX request

After receiving an HTML document as a response from an AJAX call, I need to create a redirection page using this HTML response. Can anyone provide guidance on how to achieve this? ...

javascripthtmlajaxhttp-redirect

Deactivate hover effects and media queries for Material UI controls in all states

Since I am using a touch-capable monitor, I noticed that hover styles are not showing up on any controls. Specifically, when I hover over a Material UI button, I see the following styles: https://i.stack.imgur.com/uwBpt.png Is there a way to disable all ...

cssreactjsmaterial-ui

Changing the color of HTML text based on a variable in Vue JS can be achieved by altering the CSS styles dynamically

I have developed a website that shows values with a set threshold. I now want to change the color of the values when they exceed the threshold, but I am unsure of how to proceed. I want to display consultation.indicateurs.TRS in red when it exceeds the va ...

javascripthtmlvue.js

Vue component always renders a new line

Whenever I include a <component> tag in my main application, it always renders on a new line. Is there a way to make it inline? I am trying to achieve something like this: <p>This is a component :<component></component></p> & ...

htmlcssvue.jsvuejs2vue-component

What are some strategies for maintaining a responsive layout with or without a sidebar?

I've made the decision to incorporate a sidebar on the left side of all pages across my website. This sidebar must have the ability to be either hidden or shown, without overlapping the existing content on the page. However, I'm encountering an ...

htmlcss

The CSS files undergo modifications when executing the command "npm run dev"

I've been working on an open-source project where I encountered a bug. Even when there are no images to display, the "Load More" button in the web browser extension still appears. To fix this, I decided to add the class `removeButton` to the button an ...

javascripthtmlcssnode.jsnpm

Learn how to implement a feature in your chat application that allows users to reply to specific messages, similar to Skype or WhatsApp, using

I am currently working on creating a chatbox for both mobile and desktop websites. However, I have encountered an obstacle in implementing a specific message reply feature similar to Skype and WhatsApp. In this feature, the user can click on the reply butt ...

javascripthtmljquerycsschat

How can I disable the background color in Chrome autocomplete? Is there a way to make the background

There's a form on my website where the autocomplete feature shows a blue background color. The form itself has a semi-transparent white background. I managed to change the autofill color to white using this CSS property: -webkit-box-shadow: 0 ...

htmlcssgoogle-chromeautofill

Allow the checkbox to only be functional for one use

Toggle the checkboxes between enable and disable based on user's choice to edit or cancel operation. This functionality has been tested on both my Android phone and tablet devices. Upon loading the page, the HTML code appears like this: <div class ...

jqueryhtmljquery-mobile

Obtain the value of a range using JQuery

I made an attempt to retrieve the value of JQuery's range slider when it changes. Here is how I tried: On the HTML/PHP page: <div class="total"> <label for="">Total</label> <p><span class="monthrc"></span ...

javascriptjqueryhtmljquery-ui

Personalize the file button for uploading images

I have a button to upload image files and I want to customize it to allow for uploading more than one image file. What is the logic to achieve this? <input type="file" />, which renders a choose button with text that says `no files chosen` in the sa ...

javascriptjquerycsshtml

Utilize Node JS to assign variables to HTML form inputs

Can anyone help me with storing HTML form inputs in variables using Node JS? I'm having trouble getting it to work properly. Below is the HTML form snippet: <form action="localhost:8080/api/aa" method="post"> <input id="host" type="text ...

javascripthtmlnode.jsexpress

What is the best way to avoid adding duplicate HTML content to Bootstrap modal divs using jQuery?

In my project, I wanted to create a functionality where clicking on an image would trigger a modal box to pop up with additional content added once. However, I encountered two issues that I'm currently facing. Firstly, the header text that I intended ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best method for maintaining jQuery and Bootstrap features while implementing seamless page loading?

Solution Needed for Page Loading Issue I am currently working on implementing non-refresh page loading on my website using ajax. When a user chooses a page from the sidebar, the content section of the website should update dynamically without refreshing t ...

javascriptjqueryajaxtwitter-bootstrapdatatables

Ways to confirm my CSS modifications in Chrome Developer Tools

I find myself tweaking the CSS of various elements using dev tools. After making multiple changes, I often lose track of where I have applied new styles to the elements. Is there a way to easily compare the current styles with the original styles on the ...

cssgoogle-chrome-devtools

Customizing AngularJS directives by setting CSS classes, including a default option if none are specified

I have designed a custom directive that generates an "upload button". This button is styled with bootstrap button CSS as shown below: <div class="btn btn-primary btn-upload" ng-click="openModal()"> <i class="fa fa-upload"></i> Upload & ...

javascriptangularjstwitter-bootstrap

Encountering a hiccup during a join linq query操作oops!

I am currently working on this code snippet: public ActionResult JoinSupToPro() { SupplierDBContext dbS = new SupplierDBContext(); var innerJoinQuery = from pro in db.Products join sup in dbS.Suppliers on pro.SupplierId equals sup ...

c#htmlasp.net-mvclinqentity-framework