Troubleshooting problem with spacing on three horizontal divs

I am currently working on building an E-commerce website to gain some practice. Here is how the div is set up:

.small-container {
  max-width: 1080px;
  margin: 5px;
  padding-left: 25px;
  padding-right: 25px;
}

.col-4 {
  flex-basis: 25%;
  padding: 10px;
  min-width: 200px;
  margin-bottom: 50px;
  background-color: #87bdd8!important;
  border-style: solid;
  border-color: #1E90FF;
}

.col-4 img {
  width: 100%;
  border-style: solid;
}
<div class="small-container">
  <h2>Merch by Elute FLP</h2>
  <div class="row">
    <div class='col-4">
      <img src="Pictures/JeansandTee.jpg">
      <h5>Black Graphic T-Shirt</h5>
      <p class="price">$29.99</p>
      <p>Black Shirt w Graphic 100% cotton</p>
      <p><button>Add to Cart</button></p>
    </div>
    <div class="col-4">
      <img src="Pictures/JeansandTee.jpg">
      <h5>Black Graphic T-Shirt</h5>
      <p class="price">$29.99</p>
      <p>Black Shirt w Graphic 100% cotton</p>
      <p><button>Add to Cart</button></p>
    </div>
    <div class="col-4">
      <img src="Pictures/JeansandTee.jpg">
      <h5>Black Graphic T-Shirt</h5>
      <p class="price">$29.99</p>
      <p>Black Shirt w Graphic 100% cotton</p>
      <p><button>Add to Cart</button></p>
    </div>
  </div>

As I'm new to coding and still learning, please excuse any mistakes in my code or question. I prefer figuring things out on my own rather than relying solely on tutorials. However, I can't seem to solve this issue myself. My intention is for the divs to have space without wrapping when I add margins.

Currently using Atom Framework and facing a problem where elements are displayed vertically when running the code here, but they appear horizontally when loaded in Atom. Any idea why this might be happening?

htmlcss

Answer №1

When utilizing columns with flex-basis, it's important to designate the div with the class row as a flex parent.

I recommend using the columns for grid layout and styling their content individually. In the provided example, I've created elements with the class .card that are contained within the columns.

Another crucial point to remember is setting the box-sizing of the columns to border-box. This allows you to add padding to the columns (instead of margins), which will be factored into the 25% width of each column. It's best to avoid horizontal margins in this case to maintain the desired layout of 4 columns with equal width.

.small-container {
  max-width: 1080px;
  margin: 5px;
  padding-left: 25px;
  padding-right: 25px;
}

/* Simplified column styles to structure the grid */
.col-4 {
  flex-basis: 25%;
  box-sizing: border-box;
  margin-bottom: 50px;
  padding: 0 10px;
}

.col-4 img {
  width: 100%;
  border-style: solid;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

/* Style for column content */
.card {
  flex-basis: 25%;
  padding: 10px;
  background-color: #87bdd8 !important;
  border-style: solid;
  border-color: #1E90FF;
}
<div class="small-container">
    <h2>Merch by Elute FLP</h2>
    <div class="row">
      <div class="col-4">
        <div class="card">
          <img src="Pictures/JeansandTee.jpg">
          <h5>Black Graphic T-Shirt</h5>
          <p class="price">$29.99</p>
          <p>Black Shirt w Graphic 100% cotton</p>
          <p><button>Add to Cart</button></p>
        </div>
      </div>
      <div class="col-4">
        <div class="card">
          <img src="Pictures/JeansandTee.jpg">
          <h5>Black Graphic T-Shirt</h5>
          <p class="price">$29.99</p>
          <p>Black Shirt w Graphic 100% cotton</p>
          <p><button>Add to Cart</button></p>
        </div>
      </div>
      <div class="col-4">
        <div class="card">
          <img src="Pictures/JeansandTee.jpg">
          <h5>Black Graphic T-Shirt</h5>
          <p class="price">$29.99</p>
          <p>Black Shirt w Graphic 100% cotton</p>
          <p><button>Add to Cart</button></p>
        </div>
      </div>
      <div class="col-4">
        <div class="card">
          <img src="Pictures/JeansandTee.jpg">
          <h5>Black Graphic T-Shirt</h5>
          <p class="price">$29.99</p>
          <p>Black Shirt w Graphic 100% cotton</p>
          <p><button>Add to Cart</button></p>
        </div>
      </div>
      <div class="col-4">
        <div class="card">
          <img src="Pictures/JeansandTee.jpg">
          <h5>Black Graphic T-Shirt</h5>
          <p class="price">$29.99</p>
          <p>Black Shirt w Graphic 100% cotton</p>
          <p><button>Add to Cart</button></p>
        </div>
      </div>
    </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

Toggle Submenu Visibility with a Click

One section of my code is located in sidebar.component.html : <ul class="nav"> <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item"> &l ...

htmlcssangulartypescript

Unexpected resizing of DIV element in Chrome

Working on my new PHP website, I encountered a strange issue recently. I have a file for the top navbar that is included on every page and it was functioning perfectly fine. However, while creating a register form, I noticed something odd happening. When r ...

phphtmlcssgoogle-chromeweb

What is the best way to launch a Popup window that spans from the top to the bottom of the screen?

I'm attempting to create a popup window that stretches from the top of the screen to the "applications" bar in Windows. Here's the code I'm using: function windowOpener(windowHeight, windowWidth, windowName, windowUri) { var windowHeight = ...

javascripthtmlcss

Painting Magic: Exploring the World of Canvas Zoom and Moves

I'm having trouble implementing zoom and pan functionality for this particular canvas drawing. While there are examples available for images, my case is different since I am not working with images. Any tips or suggestions on which libraries to use wo ...

javascriptjqueryhtmlcanvashtml5-canvas

How to bypass validation for required input in jQuery validate plugin

As an example, consider the <input name="surname" id="surname" type="text">. Sometimes I want to hide this input and make it non-required. My current workaround is to set a value such as "some value" when hiding the input, and then remove this value ...

javascriptjqueryhtmljquery-validate

Can the value in a JavaScript object be updated dynamically when a button is clicked?

In my JavaScript code, there is an object named annualPlan. Whenever a user submits the HTML form for a specific month, I aim to update the value in the object for that particular month accordingly. For instance, if someone submits August 21 and 200, I w ...

javascripthtmlcss

Could we add a touch more to the favicon?

After searching far and wide on this site and Google, I have come up empty-handed in my quest to resolve my favicon dilemmas. Despite delving into various tutorials, the concept of favicons still eludes me. The idea that clearing the cache could be a sol ...

html

Editing text on an Android device - Removing formatting pieces

I've encountered an issue where trying to remove spans from an EditText using EditText.getText().clearSpans() results in strange behavior. Line feeds start appearing as boxes and any newly set spans are misplaced. My question is: Is there a way to cl ...

androidandroid-edittextgettexthtmlredraw

Leverage XMPP with the power of HTML5

I have been intrigued by the integration of xmpp (Extensible Messaging Presence Protocol) with html5 and javascript. How can one implement an xmpp chat in html5? ...

htmlxmpp

Responsive CSS design that adjusts to fit the content

Struggling to make the wrapper expand with its content... This is the structure: * { padding: 0; margin: 0; } body { background-color: #ccc; background-repeat:repeat; font: Tahoma, Geneva, sans-serif; color: #FFF; } .wrapper { width: 95%; margin: 0 au ...

htmlcsslayoutheight

I'm looking to add a price ticker to my html webpage. Does anyone know how to do this?

PHP Code <?php $url = "https://www.bitstamp.net/api/ticker/"; $fgc = file_get_contents($url); $json = json_decode($fgc, true); $price = $json["last"]; $high = $json["high"]; $low = $json["low"]; $date = date("m-d-Y - h:i:sa"); $open = $json["open"]; ...

javascriptphpjqueryhtml

Tips for choosing a drop-down menu option without an identifier using Selenium in Python

I am trying to choose an element/item from a drop-down menu in Python and Selenium without using an id element. Here is the HTML code snippet: <mbo-transaction-mode-select mode="filters.mode" class="ng-isolate-scope"> <select class="form-con ...

pythonhtmlselenium

Looking to retrieve just your Twitter follower count using JavaScript and the Twitter API V1.1?

I am trying to retrieve my Twitter follower count using JavaScript/jQuery in the script.js file and then passing that value to the index.html file for display on a local HTML web page. I will not be hosting these files online. I have spent weeks searching ...

javascripthtmlajaxsvgtwitter

The drawback of using a datepicker within an Angular input field

When attempting to open the Angular Material datepicker, it was appearing above the input field. How can I make it open below the input field instead? <mat-form-field appearance="outline" class="w-100 date-class"> < ...

cssangularangular-materialmat-datepickermat-form-field

Trigger a click based on the CSS path starting from a specific element in the DOM

I am currently developing a feature for mouse activities, such as moving the mouse, clicking, and scrolling. I want to be able to record these activities and then playback them later on. So far, I have successfully recorded mouse movement, and now I need t ...

javascriptjqueryhtmlcss

The text in my image is positioned away from the top

Hi there, I am new to exploring HTML and CSS and I have been trying to display some images and text on a webpage. My goal was to have the text appear next to the image, which is working fine. However, I am encountering an issue where the text aligns itself ...

htmlcssimagetext

Unlocking the Secret to Rotating a GroundOverlay on Google Maps

I am currently working on a map project that involves adding shapes and locations onto the map and saving it. However, I am encountering an issue with groundoverlay rotation. Even though there is no built-in rotation property in the Google Maps documenta ...

jquerycssgoogle-mapsgoogle-maps-api-3

What is the best way to align elements within a row/column layout in Angular Material when working with divs?

To set up two div blocks in a row, I'm utilizing the code below: <div layout="column" layout-gt-xs="row" layout-align="center center" id="row"> <div id="a">a</div> <div id="b">b</div> </div> The CSS for this ...

cssangularjsangular-material

Adding a padding-left to a horizontal list within Flexbox enhances the design and structure

How can the left-padding added by Flexbox on a horizontal list be fixed even with justify-content: space-between? <div class="list-container"> <ul> <li>One</li> <li>Two</li> <li>Three</li> ...

htmlcssflexbox

creating a mixin for a box-shadow value of none in LESS CSS

I'm encountering a challenge with implementing the box-shadow mixin in LESS css. Here's the mixin for box-shadow: .boxShadow (@x, @y, @blur, @spread: 0, @alpha) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-s ...

cssless