Tips for adjusting the fluidity of individual columns using CSS

* {
  box-sizing: border-box;
}

/* Add a card effect for ticker(s) */
.card {
  background-color: rgb(24, 28, 41);
  padding: 5px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5, 105, 256);
  /*rgb(196, 95, 0)*/
  border-radius: 3px;
  margin: 1%;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: rgb(5, 105, 256)/*rgb(196, 95, 0)*/
  padding: 15px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three equal columns that floats next to each other */
.column {
  display: inline-block;
  width: 30.5%;
  padding: 15px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5, 105, 256);
  /*rgb(196, 95, 0)*/
  border-radius: 3px;
  margin-left: 1%;
  margin-right: 1%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 98%;
  }
}

body {
  background-color: rgb(24, 28, 41);
  color: rgb(255, 255, 255);
  font-family: "Helvetica", "Arial", sans-serif;
  margin: 0;
  padding: 0;
}

</head>
<body>
<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="card">
        <label for="ticker">Ticker(s):</label>
        <input type="text" id="ticker" name="ticker" value="" style="text-transform:uppercase"><br>
</div>

<div class="row">
  <div class="column">
    <h2>Column</h2>
    <p>INPUT INFO LATER INPUT INFO LATER</p>
 </div>
  <div class="column">
    <h2>Column</h2>
    <p>INPUT INFO LATER</p>
  </div>
  <div class="column">
    <h2>Column</h2>
    <p>INPUT INFO LATER</p>
  </div>
</div>
</body>
</html>

htmlcssmultiple-columns

Answer №1

Utilize the display: flex property within the row class.

NOTE: By removing the box-sizing: border-box style from all elements (*), you can eliminate the unequal spacing on the sides.

/* Implement a card effect for ticker(s) */

.card {
  background-color: rgb(24, 28, 41);
  padding: 5px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5, 105, 256);
  /*rgb(196, 95, 0)*/
  border-radius: 3px;
  margin: 1%;
}

body {
  margin: 0;
}


/* Style the header */

.header {
  background-color: rgb(5, 105, 256)/*rgb(196, 95, 0)*/
  padding: 15px;
  text-align: center;
}


/* Style the top navigation bar */

.topnav {
  overflow: hidden;
  background-color: #333;
}


/* Style the topnav links */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Hover effect */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Create three equal columns that sit next to each other */

.column {
  display: inline-block;
  width: 30.5%;
  padding: 15px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5, 105, 256);
  /*rgb(196, 95, 0)*/
  border-radius: 3px;
  margin-left: 1%;
  margin-right: 1%;
  overflow: hidden;
}


/* Clear floats after columns */

.row {
  display: flex;
}


/* Responsive design - columns stack vertically on smaller screens */

@media screen and (max-width:600px) {
  .column {
    width: 98%;
  }
}

body {
  background-color: rgb(24, 28, 41);
  color: rgb(255, 255, 255);
  font-family: "Helvetica", "Arial", sans-serif;
  margin: 0;
  padding: 0;
}
</head>

<body>
  <div class="topnav">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
  </div>


  <div class="card">
    <label for="ticker">Ticker(s):</label>
    <input type="text" id="ticker" name="ticker" value="" style="text-transform:uppercase"><br>
  </div>


  <div class="row">
    <div class="column">
      <h2>Column</h2>
      <p>INSERT INFO HERE LATER INSERT INFO HERE LATER</p>
    </div>
    <div class="column">
      <h2>Column</h2>
      <p>INSERT INFO HERE LATER</p>
    </div>
    <div class="column">
      <h2>Column</h2>
      <p>INSERT INFO HERE LATER</p>
    </div>
  </div>
</body>

</html>

Answer №2

Utilizing a grid layout is another option that allows for easy customization and responsiveness. You have the flexibility to include as many columns and boxes as needed, all of which will adjust automatically.

* {
  box-sizing: border-box;
}


/* Apply a card effect for ticker(s) */

.card {
  background-color: rgb(24, 28, 41);
  padding: 5px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5, 105, 256);
  /*rgb(196, 95, 0)*/
  border-radius: 3px;
  margin: 1%;
}

body {
  margin: 0;
}


/* Customize the header */

.header {
  background-color: rgb(5, 105, 256)/*rgb(196, 95, 0)*/
  padding: 15px;
  text-align: center;
}


/* Personalize the top navigation bar */

.topnav {
  overflow: hidden;
  background-color: #333;
}


/* Style the topnav links */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Adjust color on hover */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Establish three equal columns that float beside each other */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap: 1%;
  margin: 0 1% 0 1%;
}

.column {
  padding: 15px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5, 105, 256);
  /*rgb(196, 95, 0)*/
  border-radius: 3px;
}

/* Responsive design - causes the three columns to stack vertically instead of horizontally */

@media screen and (max-width:600px) {

body {
  background-color: rgb(24, 28, 41);
  color: rgb(255, 255, 255);
  font-family: "Helvetica", "Arial", sans-serif;
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: auto;
  grid-gap: 

</head>
<body>
<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>


<div class="card">
        <label for="ticker">Ticker(s):</label>
        <input type="text" id="ticker" name="ticker" value="" style="text-transform:uppercase"><br>
</div>


<div class="grid">
  <div class="column">
    <h2>Column</h2>
    <p>INPUT INFO LATER INPUT INFO LATER</p>
 </div>
  <div class="column">
    <h2>Column</h2>
    <p>INPUT INFO LATER</p>
  </div>
  <div class="column">
    <h2>Column</h2>
    <p>INPUT INFO LATER</p>
  </div>
</div>
</body>
</html>

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

Adding a CSS style to specific sections of a string that is quoted in a Razor ASP.NET file

Is it possible to format a specific part of a string? I'm trying to only stylize the word within quotation marks. This is my cshtml code: { <div class="h-44 overflow-auto text-left mx-4 mb-4"> <p ...

c#cssasp.netasp.net-corerazor

Ways to implement border spacing using CSS

Here's a snippet of the code I've been working on: HTML: <html> <body> <div id="article"> <h1>TITLE</h1> <p>text</p> </div> </body> </html> CSS: #article { colo ...

htmlcss

Creating a gallery that adjusts to different screen sizes is a valuable

Hello fellow programmers, I'm currently facing a challenge. I'm trying to create a gallery using HTML, CSS, and Bootstrap (I have a good grasp of JavaScript and still learning). I'm aiming to make it fully responsive, but I'm strugglin ...

htmlcssbootstrap-4

React not displaying images with relative paths

In the past, I used to import images in React like this: import person from '../images/image1.png' And then use them in my code like this: <img src={person} alt="" /> Now, for some reason, I want to directly specify the image pa ...

javascripthtmlcssreactjs

How can you apply color to {{expression}} text using AngularJS while also keeping all the text on a single line?

After writing the following code, I noticed that when I enter text into the input box, an output appears. However, I am now trying to find a way to color the output text while keeping it on the same line. <script src="https://ajax.googleapis.com/ajax ...

javascripthtmlangularjscolors

Blending ThreeJS graphics with typical HTML/CSS pages

Is it feasible to swap out an animated image in the background of a website with JSON geometry while keeping the HTML elements in the forefront? I've attempted to utilize DOM Elements in ThreeJS without success. I experimented with incorporating my JS ...

jsonhtmlcssthree.jswebgl

What is the best way to disable stacking toasts in bootstrap?

I have been experimenting with stacking Bootstrap toasts, but I am encountering an issue with the close buttons not functioning as expected. Currently, I am only able to close the most recent toast and none of the others. My attempt at adding an event lis ...

jqueryhtmlbootstrap-4

Populate your website with both a Bootstrap Popover and Modal for interactive user engagement through hover

Here's the situation: I want to showcase a user's name with a popover that reveals a snippet of their profile information. I've got that part down, where it dynamically generates and displays the popover content as needed. The popover functi ...

javascripthtmlcsstwitter-bootstrapmodal-dialog

Using Bootstrap to center elements only on specific ones

I am currently working on creating a "navbar/toolbar" with one item positioned on the left side (h3) and three items aligned on the right side (a, a, and select). However, I am facing an issue where only the first item (h3) is vertically centered. Can some ...

htmlcsstwitter-bootstrapbootstrap-4

What causes Next.JS to automatically strip out CSS during the production build process?

Encountering unpredictability in CSS loading while deploying my Next.JS site. Everything appears fine locally, but once deployed, the CSS rules seem to vanish entirely. The element has the attached class, yet the corresponding styling rules are nowhere to ...

javascriptcssreactjswebpacknext.js

How come the display is not aligned correctly when using display: inline-block along with text?

Could someone explain why a div with display: inline-block aligns differently when there is text or another element inside it? I know that vertical-align can fix this issue, but I'm curious to understand how the browser makes its decision on how to di ...

htmlcss

The AngularJS $HTTP loop counter fails to update

When working with an HTTP service and binding JSON data to HTML, I implemented the following code: This function uses a 2-second timer to automatically fetch data whenever there is a change in the backend. function sampleDevices ...

javascripthtmlangularjs

Automated resizing for various monitor dimensions in HTML

Is there a way to dynamically adjust the zoom level on an HTML webpage based on the monitor size? For instance, an image that appears large on a laptop screen may look small on a PC monitor. Is there a solution available to scale the picture size as the mo ...

javascripthtmlzooming

Tips for updating images with HTML and CSS?

Sorry if this question seems strange, but I have a doubt that I need clarification on. Regarding assumptions: If I have 5 images, is it possible to change each image one by one (like a slider) using only HTML and CSS styles, without relying on jQuery or J ...

htmlcssimageslider

Updating the value of a time input tag using jQuery

I am currently trying to dynamically set the value of an HTML input tag with type="time" using jQuery. Here is the code for the HTML Tag: <input class="form-control" style="font-size: 1em;" type="time" name="time_star ...

htmljqueryinput

Is it window.jQuery or just jQuery?

(function($) { // plugin code })(window.jQuery); It appears that this code produces almost the same effect as: (function($) { // plugin code })(jQuery); Is it necessary to use window.jQuery instead of just jQuery as the function argument? Does it serve ...

javascriptjqueryhtmlpluginszepto

What is the best way to set the width of a fixed div based on its parent div's percentage width?

Having trouble setting a fixed div to be the same width as its parent element, which is itself size relative to another div. To clarify, here is a code snippet that demonstrates the issue: HTML <div class="grandparent"> <div class="parent" ...

htmlcsswidthfixed

Optimize Your Website for Various Screen Sizes

Can anyone assist with centering my webpage on small screen sizes? Everything looks good at the normal width of 989px, but once it shrinks, it shifts to the left and leaves excess white space on the right. I've tried various methods to correct this is ...

csshtmlfluid-layout

Showing information from a SQL database in an HTML format

The PHP code below is used to retrieve data from a MySQL table, but I need assistance in displaying it in an HTML form. <?php $servername = "localhost"; $username = "root"; $password = "icsk"; $dbname = "yusuf"; // Create connection $conn = new mysqli ...

phphtmlsqlconnectivity

Tips for showcasing two cards side by side on mobile screens?

This is my glitch. I have a layout where I see 3 cards in a row for desktops, 2 cards per row on tablets, and 1 card for mobile devices. However, I would like the cards to resize and display 2 cards in a row on mobile. How can I achieve this? Here is the f ...

htmlcssresponsive-designresponsivemobile-website