Divide the full width into three divisions, each taking up 33% of the total width

I have been experimenting with using 3 divs to create a table-like layout with 3 columns. I set each div to occupy 33% of the width of the page, and it worked well until I tried to add padding to move the text away from the border. This caused the third div to move to the next line. Any suggestions on how to add padding while keeping all 3 divs in one row would be greatly appreciated.

Code:

CSS:

.container {
   padding-top: 53px;
   width:100%;
}

.table1{
   border-style: solid;
   border-width: 2px;
   float: left;
   width: 33.3%;
   text-align: justify;
   padding-left: 3px;
   padding-right: 3px;
   background-color: gray;
}

.table2{
   border-style: solid;
   border-width: 2px;
   border-left: 0px;
   border-right: 0px;
   float: left;
   width: 33.3%;
   text-align: justify;
   padding-left: 3px;
   padding-right: 3px;
}

.table3{
   border-style: solid;
   border-width: 2px;
   float: left;
   width: 33.3%;
   text-align: justify;
   padding-left: 3px;
   padding-right: 3px;
}

HTML:

<div class="container">
  <div class="table1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="table2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="table3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
htmlcss

Answer №1

To ensure that the padding and border of the elements are included in their height/width calculations, you can apply the box-sizing: border-box property:

.table1, .table2, .table3 {
  box-sizing: border-box;
}

It is also recommended to assign a common class to all the tables:

Check out an example here

.table {
  width: 33.33%;
  box-sizing: border-box;
}

Answer №2

To achieve equal column widths regardless of their number, use display: table and table-layout: fixed for the container, and display: table-cell for columns.

.container {
    display: table;
    table-layout: fixed; /* Ensures equal column widths */
    width: 100%;
}

.container > DIV {
    display: table-cell;
}

This method is gap-free between columns and container sides, unlike using floats.

It's also compatible with IE8 and above, unlike Flexbox which requires IE10+.

Answer №3

Alternatively, a slight adjustment to your code can utilize the CSS calc() function as demonstrated below:

width: calc(33.3% - 10px);

Each div width is calculated as 33.3% minus the sum of padding and border values - due to their impact on element width.

This applies to .table1 and table3, whereas the middle .table2 only requires 6px instead of 10px due to the absence of border values.

Additionally, some redundant code has been simplified in this JS Fiddle

.container {
   padding-top: 53px;
   width:100%;
}

.table1, .table2, .table3{
   border:2px solid;
   float: left;
   padding: 0 3px;
   width: calc(33.3% - 10px);
   text-align: justify;
}
.table1{
  background-color: gray;
}

.table2{
   border:none;
   border-top:2px solid;
   border-bottom:2px solid;
   width: calc(33.3% - 6px);
}
<div class="container">
      <div class="table1">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div class="table2">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div class="table3">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
   </div>

Answer №4

Enhance your layout with Flexbox:

Start by resetting default styles:

html,
body {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}

Convert .container into a flex container:

.container {
  padding-top: 53px;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}

Apply the following to each child element (e.g. .table1, etc...):

flex: 1 0 auto;

Avoid using floats in a flex layout to ensure uniform column heights and widths. You can remove float: left. To add gutters between columns, change flex-start to space-between and adjust the width accordingly.

html,
body {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}
.container {
  padding-top: 53px;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}
.table1 {
  border-style: solid;
  border-width: 2px;
  text-align: justify;
  width: 33.3%;
  padding-left: 3px;
  padding-right: 3px;
  background-color: grey;
  flex: 1 0 auto;
}
.table2 {
  border-style: solid;
  border-width: 2px;
  border-left: 0px;
  border-right: 0px;
  text-align: justify;
  width: 33.3%;
  padding-left: 3px;
  padding-right: 3px;
  flex: 1 0 auto;
}
.table3 {
  border-style: solid;
  border-width: 2px;
  text-align: justify;
  width: 33.3%;
  padding-left: 3px;
  padding-right: 53px;
  flex: 1 0 auto;
}
<p>An additional 50px is included in .table3 to illustrate the equal distribution of column widths.</p>

<div class="container">
  <div class="table1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="table2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="table3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </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

mention colleague(parent) instruction request

I have been exploring the use of metadata for setting HTML input attributes. After reading through the Attribute Directives Guide (https://angular.io/docs/ts/latest/guide/attribute-directives.html), I have developed the following implementation: import "r ...

javascripthtmlangularangular2-directives

Using session variables in HTML allows developers to store and retrieve

My index.html file includes a login form that submits to login.php. Once the user is verified, they are redirected back to index.html and the verified username is stored in a session variable called username. I am looking for a way to display this username ...

phpjqueryhtmlajaxsession-variables

Inquiry about CSS Media Queries

I am facing an issue with CSS media queries... For my HTML page, I have separate files for desktop and iPad styles - desktop.css and ipad.css. In desktop.css, I have used @import url("ipad.css"); and added a @media not only screen and (device-width:768px) ...

javascripthtmlcssw3cmedia-queries

Selenium extracts valuable content, specifically the text within the <h2> tag of a webpage,

I am currently working on a project that involves entering a postcode (which will eventually be a list) into a website and saving the obtained results to a CSV file using a loop to move on to the next. However, I am encountering difficulties when it comes ...

htmlpython-3.xselenium-webdriver

How can I incorporate multiple JSX files into plain HTML without using npm?

I have a question regarding importing JSX files in an HTML file without using npm and directly running it with LiveServer. I have two files, index.js and app.jsx, that I want to connect within my index.html script. How can I achieve this? Code: index.html ...

javascripthtmlreactjsnpmliveserver

What could be the reason for the lack of CSS being applied to elements sharing the same class?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...

htmlcss

What is the best way to utilize AJAX for displaying data within a div element?

I am struggling with integrating two files - index.php and process.php. In my index.php file, there is a form that submits to process.php: <form class="form" action="process.php" method="POST" name="checkaddress" id="checkaddress"> <table> ...

javascriptjqueryhtmlajaxform-submit

The interaction between a parent element and an iframe, combining mouseover/out events with clicking actions

I am brand new to programming and seeking some guidance. I came across a post about mouseover/out combined with click behavior that I found intriguing. However, I am struggling to implement it successfully in my code. Here is the code snippet: Child.htm ...

javascriptjqueryhtmlcss

The pre-line white-space property is not functioning as anticipated in my CSS code

content: string; this.content = "There was an issue processing your request. Please try using the browser back button."; .content{ white-space: pre-line; } <div class="card-body text-center"> <span class="content"> {{ content }} </span& ...

htmlcssangulartypescript

After installation, the Tailwind classes seem to be malfunctioning

Let me start by mentioning that although the title of this question is reminiscent of this other question on Stack Overflow, I have already tried the solutions provided there with no success. I initially attempted to set up Tailwind using their official C ...

htmlcsstailwind-css

What could be causing my HTML table to stretch all the way to the bottom and right?

https://i.sstatic.net/SpG52.png The layout appears to be extending to the right and bottom, despite my attempts to fix it. I am utilizing the Bootstrap table class in my code. Here is the code snippet: HTML: <head> <link rel="stylesheet" ...

htmlcssbootstrap-4

Is it possible to have the navigation bar (bootstrap) appear on top of my slider as the default setting, without taking up additional space?

I'm encountering a rather simple issue that's giving me some trouble. I'm currently working on a website design using Bootstrap, and initially, there were no image sliders included by default. After integrating an image slider, I noticed th ...

htmlcssbootstrap-4

What is the best way to achieve vertical text box scrolling in CSS and HTML overflow?

I'm having an issue with a text box I created and I couldn't find a solution elsewhere. Here is the CSS script for the text box: css: .cln{ top:220px; width:680px; height:350px; text-align:left; overflow:scroll; white-space: nowrap; overflow: ...

htmlcss

Switching over to the latest version of Material-UI, v1.x.x

Currently, my app relies on Material-UI v0.17.0 which is not compatible with React v16.0.0. In order to make it work, I need to upgrade to Material-UI v1.0.0. I came across a migration tool here, but it only updates import statements. Many props have chan ...

javascriptcssversion-controlmigrationmaterial-ui

"The combination of Windows, @font-face, and Cyrillic characters presents a

I am encountering an issue with font-face and Cyrillic characters. The fonts display properly in any browser on OS X, but fail to render on a Windows 7 machine (chrome, ie etc). Even after putting the fonts through Font Squirrel and testing the demo files ...

htmlcsswindowsfont-facewebfonts

Increase the height of an element based on the content of the text within

Today I am facing a challenge: I need the text below to change when I click on one of these icons: https://i.sstatic.net/28xEF.png Luckily, it works with the following code: CSS .games-text { background-color: $color-primary; & p { m ...

javascripthtmljquerycssweb

The accuracy of real-time visitor numbers in Google Analytics is often unreliable

My website uses Google Analytics to track the page chat.php. The code snippet is correctly placed on the page according to the documentation. Within this page, there is a Flash object that connects users to an IRC chat room. Currently, there are 50 unique ...

javascriptphphtmlgoogle-analytics

Selecting specific categories to display on the homepage and limiting the number of images shown

<<html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Gallery</title> <!-- CSS only --> <link href="https://cdn.jsdel ...

htmlcssdjangotemplatesbootstrap-5

Utilizing Bootstrap 3: Mastering the Implementation of .col Classes with .form-control Classes

In my form, I have utilized the .form-control classes for the form elements. To arrange two inputs side by side, I am applying .col-md-6 on each of these inputs. However, the width generated by .col-md-6 is being overridden by the .form-control class. Is ...

htmlcsstwitter-bootstrap-3

Python Selenium: Cannot Click on Element - Button Tag Not Located

TL,DR: My Selenium Python script seems to be having trouble "clicking" on the necessary buttons. Context: Hello. I am working on automating the process of logging into a website, navigating through dropdown menus, and downloading a spreadsheet. Despite ...

javascriptpythonhtmlseleniumiframe