CSS box spacing is the key factor in creating clear layouts and

Having these 3 boxes is causing some spacing issues that I need to address. Whenever I try to add margin, the third box shifts to the next row. Below is the snippet of code:

CSS:

#hotels {
    background: url('../img/PICS/19427110_ml.jpg');
    background-size: 100%;
    height:10px;
    color:whitesmoke;
}

.contenhotelsclass {
    border-radius:10px;
    padding: 70px;
    height: 700px;
    background: rgba(0, 0, 13, 0.6);
}
.contentsfirst {

    padding-top: 100px;
    padding-bottom: 100px;
}

Whenever I include

.marginyes {
    margin: 0 30px;
}

The third box gets pushed to the next row.


HTML:

<section id="hotels">
    <div class="row">
        <div class="col-md-12 contentsfirst" id="contenthotels">
            <div class="col-md-4 contenhotelsclass">
                <img src="{{ URL::asset('img/PICS/18911510_ml.jpg') }}" class="img-circle img-responsive"> </img>
                <span><h2>{{ Str::upper($wording['training']->container) }}</h2></span>
                <span style="padding-top: 100px">{{ Str::limit($wording['training']->wording , 400, '...') }}</span>
                <span ><p style="padding-top: 30px;"><button id="trainbutton" class="btn btn-success">Read more!</button></p></span>
            </div>
            <div class="col-md-4 contenhotelsclass marginyes">
                <img src="{{ URL::asset('img/PICS/20360155_m.jpg') }}" class="img-circle img-responsive"> </img>
                <span><h2>{{ Str::upper($wording['taste']->container) }}</h2></span>
                <span style="padding-top: 100px">{{ Str::limit($wording['taste']->wording ,400,'...') }}</span>
                <span><p style="padding-top: 30px;"><button id="eatbutton" class="btn btn-success">Read more!</button></p></span>
            </div>
            <div class="col-md-4 contenhotelsclass">
                <img src="{{ URL::asset('img/PICS/31786072_ml.jpg') }}" class="img-circle img-responsive"> </img>
                <span><h2>{{ Str::upper($wording['relax']->container) }}</h2></span>
                <span style="padding-top: 100px">{{ Str::limit($wording['relax']->wording ,400,'...') }}</span>
                <span><p style="padding-top: 30px;"><button id="relaxbutton" class="btn btn-success">Read more!</button></p></span>
            </div>
        </div>
    </div>
</section>

Bootstrap 3 is the framework being used.

Any thoughts on how to resolve this issue?

Answer №1

there is a solution. update your DOM structure

old:

 <div class="col-md-4 contenhotelsclass">
              ........
 </div>

new:

<div class="col-md-4">
<div class="contenhotelsclass">
.....
</div>
</div>

apply the following css:

.contenhotelsclass {margin:0px 10px;}

Check it out on jsFiddle: http://jsfiddle.net/mp9napL3/1/

Answer №2

At first, the reason behind using margin: 0 30px; is puzzling to me as I typically only use margin:30px;.

Moreover, the issue lies in the excessive spacing between your boxes, causing the final box to be placed on the following line by your browser. If you widen your browser, the third box will remain on the same line.

Answer №3

It's clear that by using col-md-4, you are allocating 25% of the parent width. If you add extra margin, the div may cover more than 25%. The solution is to override the col-md-4 class and decrease the width to less than 25%.

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

Boxes that expand to full width and appear to float on

I am dealing with a situation where I have a container that holds multiple child elements such as boxes or sections. <section> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> <div>Box 4< ...

The input field is failing to show up on the screen

I have been working on my React app and experimenting with how to dynamically display input elements based on different screen sizes. To achieve this, I implemented the use of window.innerWidth as shown in the code snippet below: <div className='Tr ...

Troubleshooting a problem with the Jquery cycle plugin in HTML and CSS

Hi there! I've successfully integrated the jQuery cycle plugin into my slideshow, which is working great. However, I want to make the navigation controls (previous, next, pause, play) display as background images instead of visible text links. I' ...

What arrangement works best for combining flexbox with images?

I'm finding it challenging to grasp the various image size settings in Flexbox. It seems like every time I try to apply them, I end up with a different outcome. Instead of just saying "it depends on the situation," can someone provide a logical expla ...

I'm encountering an issue with my CSS image slider as it does not seem to be functioning properly on Google Chrome, yet

CSS: @-moz-keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 90% { left: -300%; } 95% { left: -400%; } 10 ...

Achieving a responsive card layout in Reactjs with Bootstrap by displaying four cards in a single row

const DisplayCategory = () => { const history = useHistory(); useEffect(() => { axios.get('http://localhost:8080/products', { headers: { Authorization: "Bearer " + localStorage.getItem("token&q ...

What could be causing this Wordpress page to be unresponsive?

I am currently having trouble with the mobile display of a particular website. The site is not rendering correctly on mobile devices. Here is a snippet of the code from the issue: fiddle <div id="contactWrapper">. While the JSFiddle example shows a ...

Icon alignment to wrapped text width has been successfully achieved with the implementation of Flexbox onto a single

I am facing an issue with text wrapping within a flexbox. I want the width of the flex item to always match the length of the wrapped text so that an icon placed next to the item stays adjacent to the text. However, due to text wrapping, there is a gap bet ...

Tips for leveraging Backbone.js for creating dynamic single page websites

I am eager to create my own personal website with a unique functionality similar to this example: The idea is to have the entire website contained within a single HTML page, where clicking on a navigation item will dynamically load only the necessary info ...

Prevent individual elements from shifting around on browser resizing within a React form

Having issues with a React form that includes an image gallery and input fields. import React, { Component } from 'react'; import ImageGallery from 'react-image-gallery'; import { Container, Row, Col, InputGroup, Button, FormControl, ...

Create a circular div that fills in when hovered over using CSS

I attempted to create an interesting effect when hovering over a circular div, but I struggled to figure out how to fill it in with the same round shape. Currently, the fill is in a square shape, but I am looking to have it match the shape of the div (whi ...

Adjusting the amount of rows and columns in a fluid manner with CSS grid (updated)

After conducting my research, it seems that the most effective way to set the final value of a CSS grid is either by directly specifying it or by creating/manipulating the css :root value. A similar query was previously raised here, although the answers p ...

What is the best way to add padding or margins to the heading that is being shown as a table-cell?

After finding an example for a header with lines on the side (source here, specifically: here), I've managed to implement it successfully. However, I am facing a challenge when trying to add some padding to both sides of the text and having the lines ...

"Getting Started with Respond.js: A Step-by-Step

I've been struggling to find clear instructions on how to properly set up respond.js. Should I just unzip it into the htdocs folder, or do I only need respond.min.js in there? Then, do I simply reference the file like this... <script src="respon ...

JSON failing to show all values sent as a string

In a div element there is a table with 3 rows, a textarea, and a button. The JSON data populates the first 3 rows correctly but the textarea remains blank. My goal is to display the previous record from the database in the textarea. function ChangeLoadin ...

Selecting a value from a populated dropdown and checking the corresponding checkbox in SQL Server

There are 8 checkboxes in this example: <table style="border-collapse: collapse; width: 100%;" border="1"> <tbody> <tr style="height: 21px;"> <td style="width: 25%; height: 21px;"><strong>Technology</strong& ...

Create a Bootstrap layout with three columns and three rows, where the third column has a height

I am trying to achieve a specific layout using the col-lg-4 class. My main goal is to make the third column span across all three rows without creating excessive white space between them. The current layout looks like this: Is it possible to do this in B ...

Choose a specific value from a drop-down menu

Looking for a solution with this piece of code: $('#Queue_QActionID').change(function () { if ($(this).val() == '501' || $(this).val() == '502' || $(this).val() == '503' || $(this).val() == '504' || $( ...

Issue with fixed sidebar on brief content

It's interesting how the sticky widget performs differently on long articles compared to short ones on my website. Here is an example of a long article where the sticky widget works well without any lag: . Now, let's take a look at a shorter art ...

Placing text in a box in the corner while maintaining the ability to scroll

I'm looking for a solution to wrap text around a toolbox while keeping the total height limited and allowing the text to scroll. The challenge is to have the corner box stay fixed in the corner without scrolling along with the text. How can I achieve ...