css three columns evenly spaced in the center

Question

css three columns evenly spaced in the center

I am currently using bootstrap, CSS, and HTML to design a responsive webpage with three columns in a row. The layout consists of a textbox on the left, a button in the center, and a table on the right.

So far, I have made three separate attempts at achieving this: (to view the code for the first attempt, open jsfiddle and search for: )

https://jsfiddle.net/martinradio/adqLpxn5/57/

https://i.sstatic.net/GoUGM.png

I am specifically focused on fixing attempt 1 as it provides the best responsiveness when resizing the page to be very thin

Attempt 1 I tried replicating this example, although the boxes are centered, I am struggling to adjust the width of the middle 'copy' box. I attempted setting the style of the middle box to a width of 10%, but encountered some difficulties.
Attempt 2 I utilized raw bootstrap col and row elements to create one row with three columns. While adjusting the width of the left box was simple, styling the middle copy button proved to be more challenging.
Attempt 3 In my original code, I managed to finalize the design of all three boxes according to my vision, however, making them responsive has been an issue.

All three attempts represent my efforts in mastering a css task: developing a responsive row comprised of three columns - col1 with a width of 45%, col2 with a width of 10%, and col3 with a width of 45%

javascript html css bootstrap-4

Answer 1

Answer №1

I didn't have enough time to review all your attempts, so I focused on attempt number 2.

Let's discuss why this layout isn't functioning as required with the 3 columns positioned side by side:

In Column 1, the textarea, everything seems fine (although setting cols="2" is unnecessary since you're already defining its width). The textarea has the default browser styling of display:inline, but it behaves like display:inline-block due to some unknown factor considering its width.
In Column 2, the button, there are no issues (it displays as display:inline-block thanks to Bootstrap).
In Column 3, the div, the default display is block provided by the browser. This causes a problem in aligning it to the right of Column 2. You need to set display: inline-block. Furthermore, the width is currently set at 200% while the requirement is 45%, so this adjustment must be made accordingly.

The Challenge of Inline Rendering & White Space in HTML Source Code

Even after fixing Column 3 as mentioned above, the columns may still not appear side by side. Instead, Column 3 might remain on a separate line despite their total widths adding up to 100%.

Why does this happen?

The issue lies in the white space between the columns in your original HTML code. Within a block context created by the containing div, any white space > 0 (including new lines) between inline tags will result in the browser inserting a single "space".

For instance:

<div>
   <div style="display:inline-block">[one]</div>
   <div style="display:inline-block">[two]</div>
</div>

...would render as:

[one] [two]
     ^
     observe the space in between

This occurs due to the new line and subsequent spaces between the closing tag of div (one) and the opening tag of div (two), introducing extra white space between the two inline-block elements in the HTML source.

Solutions to Address This Issue

Two recommended approaches:

The straightforward solution: Eliminate the white space between the elements in the HTML markup.
Ensure that the opening tag of each column immediately follows the closing tag of the preceding column.
Alternatively, apply font-size: 0 to the container element and specify font-size: <some-size> for each individual column.
This method effectively reduces the "space" between the columns to zero width.

Answer 2

I didn't have enough time to review all your attempts, so I focused on attempt number 2.

Let's discuss why this layout isn't functioning as required with the 3 columns positioned side by side:

In Column 1, the textarea, everything seems fine (although setting cols="2" is unnecessary since you're already defining its width). The textarea has the default browser styling of display:inline, but it behaves like display:inline-block due to some unknown factor considering its width.
In Column 2, the button, there are no issues (it displays as display:inline-block thanks to Bootstrap).
In Column 3, the div, the default display is block provided by the browser. This causes a problem in aligning it to the right of Column 2. You need to set display: inline-block. Furthermore, the width is currently set at 200% while the requirement is 45%, so this adjustment must be made accordingly.

The Challenge of Inline Rendering & White Space in HTML Source Code

Even after fixing Column 3 as mentioned above, the columns may still not appear side by side. Instead, Column 3 might remain on a separate line despite their total widths adding up to 100%.

Why does this happen?

The issue lies in the white space between the columns in your original HTML code. Within a block context created by the containing div, any white space > 0 (including new lines) between inline tags will result in the browser inserting a single "space".

For instance:

<div>
   <div style="display:inline-block">[one]</div>
   <div style="display:inline-block">[two]</div>
</div>

...would render as:

[one] [two]
     ^
     observe the space in between

This occurs due to the new line and subsequent spaces between the closing tag of div (one) and the opening tag of div (two), introducing extra white space between the two inline-block elements in the HTML source.

Solutions to Address This Issue

Two recommended approaches:

The straightforward solution: Eliminate the white space between the elements in the HTML markup.
Ensure that the opening tag of each column immediately follows the closing tag of the preceding column.
Alternatively, apply font-size: 0 to the container element and specify font-size: <some-size> for each individual column.
This method effectively reduces the "space" between the columns to zero width.

css three columns evenly spaced in the center

Answer №1

The Challenge of Inline Rendering & White Space in HTML Source Code

Why does this happen?

Solutions to Address This Issue

Similar questions

The SVG format quickly displays new and larger datasets on line charts without any transition effects

Send the contents of a `<ul>` element to the server using AJAX for form submission

Tips on integrating Angular's ui-grid with an array of strings

The Holy Alliance of Laravel and Vue

set ajax url dynamically according to the selected option value

The configuration error occurred for the `get` action due to an unexpected response. Instead of an object, an array was received

Center-aligned Bootstrap column with a width of 50% and centered vertically

The Jquery Index() method often results in a return value of -

numerous ajax requests and array variables

Is there a way to generate inline block elements that occupy the full 100% width? Furthermore, can the second element contain an additional element that is revealed upon

Enhance your web app with NextJS and Firebase authentication

Explanation: The information box does not appear when the mouse hovers over it

Incorporate dynamic classes into an HTML list using PHP

The width of the Bootstrap shadow container is not optimized for large viewports

Is a Page Refresh Required to Reload Routes in ReactJS?

Folding animation using CSS3 and vertex manipulation

Issue encountered while appending new rows to the tbody of a table

Avoid making GET requests when clicking on a link

Pre-requisites verification in TypeScript

The issue with the before selector causing the button label to overlap on top of the button remains