Eliminate the gaps within CSS3 columns

I'm attempting to achieve an effect that looks like:

C---------------------------------------)
| Address 1 | Phone Numbers             |
| Address 2 | Times place is open       |
(---------------------------------------)

However, the spacing with the following code makes it appear as:

(-------------------------------------------)
| Address 1           | Phone Numbers       |
| Address 2           | Times place is open |
(-------------------------------------------)

What steps can I take to rectify this issue? Below are the relevant CSS and HTML snippets.

<footer> 
  <style>
    footer {
      margin-left: 224px;
      margin-top: 1em;
      margin-bottom: 1em;
      clear: both;
      font-size: 0.66em;
    }

    #contactInfo{
      background: #FDF9D3;
      border: 1px solid black;
      -moz-border-radius: 5px;
      border-radius: 5px;

      -moz-column-count: 2;
      -moz-column-rule: 1px solid black;
    }
  </style>
  <div id="contactInfo">
    <span class="address">Address 1</span><br>
    <span class="address">Address 2</span><br>
    <span class="phone">Office: ###-###-####, Fax: ###-###-####</span><br>
    <span id="hours">Open Monday through Friday from 9:00am to 5:30pm</span>
  </div>
  <div id="copyright">Copyright &copy; Business Name goes here, 2010; All rights reserved</div>
</footer>
htmlcss

Answer №1

#contactInfo{
  background: #FDF9D3;
  border: 1px solid black;
  -moz-border-radius: 5px;
  border-radius: 5px;

  -moz-column-count: 2;
  -moz-column-rule: 1px solid black;
  -moz-column-width: 200px;
  -moz-column-gap: 20px;
}
span.address{ float:right;)

Answer №2

Have you considered adding right-padding to the wrapper instead?
Make sure to specify a width (2 times the width of the column + padding = total desired width).
Don't forget that you have the option to adjust the box model using box-sizing for css3 compatible browsers.

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

Guide to implementing nested conditions to reveal a hidden block with AngularJS

I need help setting up conditions to display a hidden div. I want the hidden block to appear only after entering a value in the 'name' textbox and clicking on the search link. Currently, the hidden div appears even if the search link is clicked b ...

htmlangularjsng-show

Retrieve webpage content using an ajax request in JavaScript

I'm working on an HTML page with an Ajax call to load table content. <html> .... <script sec:haspermission="VIEW_NOTE" th:inline='javascript'> require(['app/agent/viewGlobalAgent'], function (){ ...

javascripthtml

Issue with PrestaShop not displaying page content after adding jQuery

After updating to the latest version of Presta Shop, I encountered an issue. When I inserted the following code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> jQuery(document).ready(function(){ ...

jqueryhtmlprestashop

Using Handlebars JS to incorporate HTML tags such as <li>, <br>, and more in your data

Is there a way to use handlebars to display a list of data in an unordered format, with "title" and "articles" as the main categories? The issue arises when some of the articles contain HTML tags, such as <a> for links. In my current code, instead of ...

javascriptjqueryhtmlhandlebars.js

Conceal a component when the succeeding one appears on a separate line

I'm looking for a solution to display an address on a webpage in two different formats based on the length. The first format should be: Street Number, PostalCode City If the address is too long to fit on one line, it should be displayed as: Street ...

csscss-float

Dynamic font size that adjusts as you change the window dimensions

Is there a way to adjust the font size in HTML so that when I resize the window, the text size adjusts accordingly? It's like setting a percentage for the text based on the size of the container it is in. Let me provide an example of what I have in m ...

javascriptjqueryhtmlcss

Looking for assistance with implementing touch gestures on an HTML website?

I am in the process of developing a web application, and I have implemented a menu bar that shifts when a user clicks on an arrow. Each click activates a new menu option. Currently, I am looking to provide users with the ability to swipe over the screen t ...

htmltouchgestures

What could be causing my HTML email to appear distorted when viewed in Gmail?

After spending the last 6 hours tackling this issue, I am still stuck. Despite my extensive googling, it seems that divs are supposed to work in emails post-2017. All the online HTML email testers I have used indicate that my email layout is perfectly fine ...

htmlcssemailgmail

Creating a clickable table cell in CSS that maintains vertical alignment of text within

Is there a way to make an entire table cell clickable while still vertically aligning the text inside it? One possible solution is to set the link to display:block and adjust the line height. However, this method may not work if the text spans two lines a ...

htmlcssvertical-alignment

What is the best way to showcase the current element using jQuery?

I have this example: link HTML CODE: <div class="common-class"> <div class="trigger"> <span class="plus">+</span> <span class="minus">-</span> </div> <div class="show"></div> </div&g ...

jqueryhtmlcss

Step-by-step guide on dynamically fetching additional images from a directory using php, jquery, and ajax

I have a scenario where I have multiple folders, each containing up to 20 images. On my HTML page, I want to display the first 5 images and provide a "click to view more" option to show the remaining 15 images when clicked. Currently, the issue I am facin ...

javascriptphpjqueryhtmlajax

Issues with Google Fonts failing to load correctly

Would you mind taking a look at this issue for me? In all browsers except Firefox, the expected behavior is that a web font remains invisible until fully loaded, preserving space on the page. Interestingly, in Chrome and IE9 (the browsers I tested), ther ...

javascripthtmlcssgoogle-webfonts

React Component for Toggling a Click Event on a Select Tag

I'm currently developing a react app where clicking on a specific text triggers the display of a select tag with several items. However, I've encountered two issues: Upon clicking the text, the select tag appears on ALL list items instead of ju ...

javascripthtmlreactjsjsx

What is causing find_by_css to return nothing when using nth-child?

Currently, I am facing an issue when trying to extract the "href" link from the following HTML code: https://i.stack.imgur.com/Gtzf4.png This is the code that I'm using: from selenium import webdriver from splinter import Browser from bs4 import Be ...

pythoncsspython-3.xseleniumbeautifulsoup

Generating an HTML table from SQL data using PHP

I'm attempting to create a dynamic HTML table using PHP to populate it with data from a MySQL database. I've tried using a while loop, but the issue is that it ends up displaying the same first row multiple times. <div class = "container"> ...

phphtmlmysqlihtml-table

What's causing my struggle to override the bootstrap nav-link class in next.js?

I am facing an issue where I need to customize the active state of bootstrap .nav-link in the code snippet below: <li className="nav-item"> <a className={`${styles.navLink} nav-link`} role="tab" data-to ...

csstwitter-bootstrapnext.js

Ways to incorporate the setTimeOut function

<body> <script> $(window).scroll(function() { $('#csgo').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scroll ...

jqueryhtmlsettimeout

Modify the color of an Ionic button for a single button, rather than changing the color for all buttons

How can I modify this code so that only the clicked button changes its color, not all of them? Here is the current code: .html: <ion-col size="6" *ngFor="let data of dataArray" > <ion-card> <ion-card-header> ...

htmlangulartypescriptionic-framework

Using jQuery to load content into a jQuery UI dialog box

I am looking to implement a pop-up that displays content from another asp page. To achieve this, I am using jquery.load to load the page into a div and jquery-ui.dialog. This is my code: <div id="dialog"></div> Inside the document ready fun ...

jqueryhtmlasp.netajaxjquery-ui

The distance from the edge of my tilted svg icon to the svg artboard

I'm currently working on developing a basic web icon system using SVG sprites. However, I have encountered a spacing issue in my code around one specific icon (between the Smash Magazine icon and the red border). I am trying to figure out how to remov ...

htmlcssimagesvgicons