CSS for leaving white space at the end of one third of a container

Question

CSS for leaving white space at the end of one third of a container

Currently developing a website and facing an issue with the layout:

I am trying to create 3 columns of equal height with each column taking up one-third of the width. However, there seems to be a small white gap on the right side of the last column. Here is a screenshot for reference:

Click to view image

You can see the white line next to the blog image in the third column.

This is the CSS code I have used for the 1/3rd column:

.thirdBox {
  float: left;
  width: 33.33%;
  width: calc(100% / 3);
  padding: 20px 40px;
  box-sizing: border-box;
  min-height: 400px;
  display: table;
}

and here are the background images added:

.thirdBox:nth-of-type(3) {
  background: url("imagelinkhere...") no-repeat 50% 50%;
  background-size: cover;
}

html css

Answer 1

Answer №1

One common issue is that when you try to set the width to 100%/3, it may end up as 33.33% in most browsers, which might not be the exact width you are hoping for.

Instead of relying on using calc() to calculate each table's width, a better approach would be to utilize display:flex; on the parent element containing all three elements that you want to display in a single row.

Unfortunately, without the context of your HTML structure, this is the extent of assistance I can offer. If you provide the HTML code, I may be able to provide further guidance.

.parentElement{
  display:flex;
}

.firstBox, .secondBox, .thirdBox {
  padding: 20px 40px;
  flex:1;
}

.firstBox{
  background:blue;  
}

.secondBox{
  background:red;  
}

.thirdBox{
  background:green;  
}

<div class="parentElement">
  <div class="firstBox"></div>
  <div class="secondBox"></div>
  <div class="thirdBox"></div>
</div>

Answer 2

One common issue is that when you try to set the width to 100%/3, it may end up as 33.33% in most browsers, which might not be the exact width you are hoping for.

Instead of relying on using calc() to calculate each table's width, a better approach would be to utilize display:flex; on the parent element containing all three elements that you want to display in a single row.

Unfortunately, without the context of your HTML structure, this is the extent of assistance I can offer. If you provide the HTML code, I may be able to provide further guidance.

.parentElement{
  display:flex;
}

.firstBox, .secondBox, .thirdBox {
  padding: 20px 40px;
  flex:1;
}

.firstBox{
  background:blue;  
}

.secondBox{
  background:red;  
}

.thirdBox{
  background:green;  
}

<div class="parentElement">
  <div class="firstBox"></div>
  <div class="secondBox"></div>
  <div class="thirdBox"></div>
</div>

Answer 3

Answer №2

Here is an example that demonstrates the use of display: table:

<div class="row">
    <div class="col">
        <div class="col-inner">
            <span>Products</span>
        </div>
    </div>
    <div class="col">
        <div class="col-inner">
            <p>Some content goes here</p>
        </div>
    </div>
    <div class="col">
        <div class="col-inner">
            <span>Contact</span>
        </div>
    &It;/div>
</Itiv>

Css:

.row {
    background-color: #999; 
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.col {
    float: left;
    width: 33.33%;
    min-height: 400px;
}

.col-inner {
    display: table;
  width: 100%;
    box-sizing: border-box;
    padding: 20px 40px;
}

.col:first-child,
.col:last-child {
    background-color: yellow;
}

.col-inner span,
.col-inner p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Answer 4

Here is an example that demonstrates the use of display: table:

<div class="row">
    <div class="col">
        <div class="col-inner">
            <span>Products</span>
        </div>
    </div>
    <div class="col">
        <div class="col-inner">
            <p>Some content goes here</p>
        </div>
    </div>
    <div class="col">
        <div class="col-inner">
            <span>Contact</span>
        </div>
    &It;/div>
</Itiv>

Css:

.row {
    background-color: #999; 
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.col {
    float: left;
    width: 33.33%;
    min-height: 400px;
}

.col-inner {
    display: table;
  width: 100%;
    box-sizing: border-box;
    padding: 20px 40px;
}

.col:first-child,
.col:last-child {
    background-color: yellow;
}

.col-inner span,
.col-inner p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

CSS for leaving white space at the end of one third of a container

Answer №1

Answer №2

Similar questions

The custom font fails to load on a customized Material UI theme

I am experiencing issues with the HTML footer not displaying correctly on my website

Increasing margin and padding by a factor of two, achieved through the utilization of float and

Efficient guide to unlock the secrets of JS height measurements

What key element is not included in this code?

Can a shadowed box feature a notch using only CSS?

Selecting the parent span element using jQuery

HTML - one div's child element takes precedence over another div

Discovering components with identical html attributes in Selenium

Tips for efficiently playing a WAV file in JavaScript by building an AudioBuffer

Looking to preserve the "ALL" selection in a JavaScript-CSS filter?

Flex and Bootstrap 5.1.3 divs are not aligned with the prices

Why does the "error loading page" message appear on the server when there is a PHP function inside jQuery Mobile?

I am unable to switch my carousel to full-screen mode

"Arranging elements with identical class in a single column but on separate rows using CSS grid - a step-by-step guide

Using Jquery to preserve the selected value in a radio button

Ensure that the jQuery ajax function triggers only after the images or iframes have completely loaded

Exponential calculator in Javascript

How can links in HTML be eliminated if a certain condition is not fulfilled?

Enhancing User Experience with Interactive React Hover Effects