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

What is the best way to implement a loading cursor when the Submit button is clicked?

Is there a way to incorporate a progress cursor into my code in order to notify the user to wait when they click the Submit button or the Upload Button while uploading multiple files? Below is an example of my form: <form action="" method="post" enct ...

javascriptjquerycsshtmlforms

Send form using ajax technology

I am in the process of developing a website using GitHub pages and Jekyll. One of the key features I want to include is a contact form that allows users to send emails. To implement this functionality, I have decided to use Formspree. After creating an ac ...

javascriptjqueryhtmlajaxgithub-pages

Error in React regarding the tri-state checkbox's indeterminate state being null

I am attempting to create a triple-state checkbox in React. The functionality I'm aiming for is that each click on the checkbox will cycle through blank->checked->crossed->blank->.... After doing some research, I stumbled upon a helpful re ...

htmlreactjscheckboxrefs

Retrieving the chosen option in Vue.js when the @change event occurs

I have a dropdown menu and I want to perform different actions depending on the selected option. I am using a separate vue.html and TypeScript file. Here is my code snippet: <select name="LeaveType" @change="onChange()" class="f ...

javascripthtmlvue.js

After deploying DRF, the CSS in Django admin is not displaying

After developing a web application using Django Rest Framework and React, I faced an issue during deployment on IIS. While the deployment is successful, I encountered a problem with the Django Admin where the styles were not displaying properly. This led t ...

cssiisdeploymentdjango-rest-frameworkdjango-admin

Interacting with an iframe element using Selenium in Python

I have a webpage with an iframe embedded, and I'm using Selenium for test automation: <iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" style="dis ...

javascriptpythonhtmlseleniumiframe

Stop the stream coming from getUserMedia

After successfully channeling the stream from getUserMedia to a <video> element on the HTML page, I am able to view the video in that element. However, I have encountered an issue where if I pause the video using the controls on the video element a ...

javascripthtmlhtml5-videogetusermedia

Showing the computation outcome on the identical page

I have implemented a table within my PHP code. In the second column of this table, it typically displays "---". However, once I click the submit button, the same page should now display the calculated result. Here is an example: <table> <tr>& ...

phpjavascriptcssajaxcalculator

Adjust the positioning of a class element

I have an eye icon that changes position when clicked. Initially, it is set to left: 10%;, but if there is a DOM element with the ID login-section, it should be repositioned to left: 50%;. I attempted to use document.getElementsByClassName('fa-eye-sl ...

javascripthtmlcss

background with alternating stripes to decorate the border of a div

Is it possible to give a striped effect to a div element's border using jQuery? Consider the following code snippet: <style type="text/css"> #panel { padding: 50px text-align: center; background-color: #e5eecc; bord ...

jqueryhtmlcss

Conceal HTML elements from the bottom as new content is being added dynamically

I am currently working on a comments feed feature. By default, only the first four comments are displayed, with an option to show more when clicking the "show more" anchor. The issue I'm facing is that if new comments are dynamically added, the CSS hi ...

javascriptjqueryhtmlcss

Acquiring the value of an input box in VBA through HTML

Can someone provide guidance on how to retrieve the value from an input box on an Internet Explorer page using VBA? I have tried various solutions but none seem to work. Below is the HTML code I am working with. I specifically need the value of the bolded ...

htmlvbainputbox

Retrieving the background image URL from inline CSS using jQuery

I'm looking for a link similar to url(img/bg/06.jpg), but when using jQuery, I get a longer link like url("file:///D:/WORKING%20FILE/One%20Landing%20Page/version/img/bg/06.jpg") https://i.stack.imgur.com/8WKgv.png Below is the code snippet in questi ...

jqueryhtmlcss

Animating the mobile menu transition using Bootstrap CSS

Can anyone help me with animating the mobile menu when I click the menu icon? This is what I have for the menu: .overlay-menu { position: fixed; display: none; z-index : 1040; width: 100vw; height: 100vh; background: rgba(0, 0,0, 0 ...

javascripthtmlcssbootstrap-4

Angular allows for the creation of a unique webpage layout featuring 6 divs

I am working on a project where I have an image of a car and I need to overlay 6 divs onto the image which can be selected with a mouse click. When a user clicks on one of the divs, it should change color. I've attempted using z-index, but it doesn&ap ...

htmlangular

the intricacies of resizing a dijit dialog

My dialog is defined as shown below: <div data-dojo-type="dijit/Dialog" id="DetailDialog" class="dijitDialog" ... I have loaded a grid inside the dialog with 10 columns. var dialog = dijit.byId("DetailDialog"); dialog.set("content", this.Details); d ...

javascripthtmldojo

Does the padding and margin of an element alter when the position is set to relative?

By utilizing relative positioning, an element can be moved in relation to its original position in normal flow. - Citation from the book "HTML&CSS: design and build websites" by John Duckett If an element has a relative position property, it opens up ...

csscss-positionmarginpadding

The checkbox is displayed as selected after being clicked in conjunction with another checkbox

In the tree structure, there are checkboxes that behave strangely when clicked. I have already read a similar discussion here. The problem I am encountering is that when I click on an item, it gets checked but the console does not show it as checked immed ...

javascriptjqueryhtmlcsscheckbox

Steps to include a HTML webpage within another page

I need assistance with a scenario involving two separate HTML pages on different servers. Merchant Form - Server A Payment Form - Server B Here's the desired scenario: The user completes all necessary fields on the Merchant Form and clicks submit. ...

javascripthtmljqueryajax

Enable the set body to have certain sections that are scrollable by setting overflow=hidden

I am currently working on a website that features the following structure: <body> <section></section> <section></section> ... </body> To prevent scroll bars on the body, I have set the CSS property body{overflow:hidden ...

cssscrolloverflow