Is the alignment of the HTML columns off?

When print-bannertext-left is empty, the print-bannertext-center shifts to the left. How can this issue be resolved?

.print-bannertext-left {
  width: 30%;
  float: left;
}
.print-bannertext-center {
  width: 30%;
  float: left;
  margin-bottom: 0.2%;
}
.print-bannertext-right {
  width: 30%;
  float: right;
  margin-bottom: 0.8%;
}
<div class="print-header">
  <div class="print-bannertext-left">

  </div>
  <div class="print-bannertext-center">
    8000-00-PO-201-01
  </div>
  <div class="print-bannertext-right">
    7/15/2015 4:41:11 PM
  </div>
</div>
<div class="print-header">
  <div class="print-bannertext-left">

  </div>
  <div class="print-bannertext-center">
    8000-00-PO-201-01
  </div>
  <div class="print-bannertext-right">
    7/15/2015 4:41:11 PM
  </div>
</div>
<div class="print-header">
  <div class="print-bannertext-left">

  </div>
  <div class="print-bannertext-center">
    8000-00-PO-201-01
  </div>
  <div class="print-bannertext-right">
    7/15/2015 4:41:11 PM
  </div>
</div>

htmlcss

Answer №1

Make sure to set a minimum height for your columns:

.print-bannertext-left {
  width: 30%;
  float: left;
  min-height: 1px;
}
.print-bannertext-center {
  width: 30%;
  float: left;
  margin-bottom: 0.2%;
  min-height: 1px;
}
.print-bannertext-right {
  width: 30%;
  float: right;
  margin-bottom: 0.8%;
  min-height: 1px;
}
<div class="print-header">
  <div class="print-bannertext-left">

  </div>
  <div class="print-bannertext-center">
    8000-00-PO-201-01
  </div>
  <div class="print-bannertext-right">
    7/15/2015 4:41:11 PM
  </div>
</div>
<div class="print-header">
  <div class="print-bannertext-left">

  </div>
  <div class="print-bannertext-center">
    8000-00-PO-201-01
  </div>
  <div class="print-bannertext-right">
    7/15/2015 4:41:11 PM
  </div>
</div>
<div class="print-header">
  <div class="print-bannertext-left">

  </div>
  <div class="print-bannertext-center">
    8000-00-PO-201-01
  </div>
  <div class="print-bannertext-right">
    7/15/2015 4:41:11 PM
  </div>
</div>

Answer №2

  1. Using a table can be more efficient for your layout

  2. If tables aren't your preference, you can alternatively set a width/height to the print-bannertext-left so that it maintains its size even when empty, preventing overlapping.

    <div class="col-1">
   <div class="inner-col-1">
      <p>column 1</p>
   </div>
</div>
<div class="col-2">
   <div class="inner-col-2">
       <p>column 2</p>
   </div>
</div>
<div class="col-3">
   <div class="inner-col-3">
      <p>column 3</p>
   </div>
</div>

.col-1, .col-2, .col-3 { width: 30%; display: inline-block }
.inner-col-1, .inner-col-2, .inner-col-3 { width: 100% }

You can view an example on Fiddle.

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

Centralize the X button using CSS

My latest challenge involves creating a close button using CSS to close a tag. I combined techniques from an article on Patterns for Closebuttons, along with a css-only tutorial for crafting an X from this Close Button using CSS. However, I've run in ...

htmlcss

How come I can't see this on my display?

I'm facing an issue with this particular HTML snippet not displaying when I view the file in Chrome or any other browser. Below is the code: <!DOCTYPE html> <html> <head> <title> # <title& ...

htmlcsshtml-tablemenubar

How can I use jQuery to reload the page only at certain intervals?

I'm currently using jQuery to reload a page with the code provided below: <script type="text/javascript"> $(document).ready(function(){ setInterval(function() { window.location.reload(); }, 10000); }) & ...

javascriptjqueryhtmlpage-refresh

Tips for properly formatting large numbers

I am facing a challenge with handling large numbers in my JavaScript code. I came across the nFormatter function for formatting large numbers but I am unsure how to integrate it into my existing code. Below is the nFormatter function that I found: functi ...

javascripthtmlnumber-formatting

I am looking to split an array into smaller subarrays, each containing 5 elements, and assign a distinct class to the elements within each subarray. How can I

I have a group of "n" "li" elements that I would like to split into "x" subsets using jQuery. Each subset should contain 5 "li" elements, and I also want to assign a different class to each subset. <ul> <li>text1</li> <li>text2&l ...

javascriptjqueryhtmlcss

Tips for binding JavaScript to dynamically generated elements?

I have a dynamic JavaScript rotation function set up with a div element that is generated dynamically by a button. The challenge I am facing is figuring out how to correctly append this rotation slider for each dynamically created element so it can operate ...

javascriptjqueryhtmlcssdynamic

What causes the ul element to display upon clicking the input field?

Why is the ul disappearing with display: none when the input element is clicked? Here is the HTML code snippet: When this input is clicked: <input class="input country" type="text"/> This unordered list should be displayed (but ...

htmljquerycssabsolute

Achieving dynamic text alignment within a Grid tile container using HTML and Angular

Here is the main section of my parent component. <div class="o-tile-container "> <div *ngFor="let country of Countrys"> <app-country [na ...

htmlcssangulartypescript

jquery fails to alter label:before

I have encountered a peculiar issue with jQuery and labels. It's quite strange because everything seems to work fine when I change the background color of a label or its font-weight, but using the :before selector doesn't seem to work. Any thoug ...

jquerycsslabel

The attribute value in an input field is not effective in Angular

My routine usage involves employing an input tag and attempting to include text using the value attribute, but it seems to be malfunctioning. Here's the line of code in question: <input class="form-control input-sm" value="14" type="number" ng-mod ...

htmlcssangularjsinput

Tips for utilizing asp:image in the code-behind

I'm having trouble with rendering an asp:image in my code behind. Let me explain my approach: In the Default.aspx file, I simply have one label element. In the code behind, I create a string variable and populate it, then assign this value to the labe ...

c#htmlasp.netimagecode-behind

Creating a menu bar in jQuery that functions similarly to tabs, but without the need to change divs

Currently, I am exploring ways to create tab functionality similar to jQuery's tabs plugin but without the need to switch between DIVs. Essentially, I am looking for a jQuery plugin that solely handles rendering the tab bar and allows me to designate ...

jquerycss

How to extract a one-of-a-kind identification number from the browser using just JavaScript in a basic HTML file?

Is there a way to obtain a distinct identification number from a browser without resorting to techniques such as generating and storing a unique number in cookies or local storage, and without utilizing a server-side language? ...

javascripthtml

Maintain line breaks in the scanner input within an HTML element

Currently, I am utilizing a Zebra DS9908 scanner to scan a barcode and transfer the data onto an HTML page. However, I am encountering an issue with preserving all input characters. Despite attempting both a <div> and <textarea>, the line feed ...

htmlbarcode-scannerzebra-scanners

Adjust the parent div's background when hovering over it

Here is the code snippet I am working with: <div class="thumb_image_holder_orange"> <img src="http://dummyimage.com/114x64/000/fff.png" /> </div> I want to change the background of the div when hovering over the image, rather than j ...

jquerycss

Splitting HTML content into pages according to the size of the content

I am currently working on a web application designed for editing documents. In this app, each document can consist of multiple pages, all following the standard paper size in Germany (DIN A4 with dimensions 210mm width x 297mm height). To ensure that the l ...

csshtml

Bootstrap's alignment of items is not functioning as anticipated

For my simple webpage, I am using Bootstrap 4 to add a header and footer. However, I am facing an issue where the footer is not displaying at the end of the page. Below is the HTML code I am using. Can anyone please guide me on what to do? html, body ...

htmlcsstwitter-bootstrapbootstrap-4

Need help in setting the default TIME for the p-calendar component in Angular Primeng version 5.2.7?

In my project, I have implemented p-calendar for selecting dates and times. I have set [minDate]="dateTime" so that it considers the current date and time if I click on Today button. However, I would like the default time to be 00:00 when I click ...

htmlangulartypescriptprimeng

Utilizing inline border style on table cells with text inputs for enhanced design

I'm looking for a way to style certain <td> elements in my table to make them appear as text inputs within the cells. In the past, I would add an extra <div> or <span> inside the cell and then apply border, margin, and padding styles ...

htmlcss

Adjust the sidebar size in Bootstrap 5 to align perfectly with the navbar brand

https://i.stack.imgur.com/Ra0c7.png I'm trying to ensure that the width of the sidebar on this page aligns consistently with the end of the logo in the top right. However, using variations of col-xxl-1 etc. is causing inconsistent sizes at different ...

javascripthtmlcssbootstrap-5