Troubleshooting problem with HTML and CSS to display user interface

My HTML and CSS code is provided below. I am facing an issue where the "city & state" labels and input types are displaying differently compared to other inputs in my form. The city & state label appears next to the input type, but I want them to be stacked on top of each other like the rest of the inputs.

HTML Code:

<div style="background-color: rgb(241, 242, 242); height: auto; width: auto;" id="Register">
    <fieldset>

        <legend>Transportation Information</legend>

        <br>
        <span id="lblBillShip" name="lblBillShip">Check if billing address same as shipping</span>
        <span style="margin-left:330px; margin-top:-21px; display:block;" class="noEnterSubmit"><input type="checkbox" name="chkBillShipSame" id="chkBillShipSame"></span><br><br>

        <span id="lblAdd1" name="lblAdd1">Address 1</span>
        <input type="text" class="noEnterSubmit" id="txtAdd1" name="txtAdd1"><br><br>

        <span id="lblAdd2" name="lblAdd2">Address 2</span>
        <input type="text" class="noEnterSubmit" id="txtAdd2" name="txtAdd2"><br><br>

        <span id="lblCity" name="lblCity">City</span>
        <input type="text" class="noEnterSubmit" id="txtCity" name="txtCity"><br><br>

        <span id="lblState" name="lblState">State</span>
        <input type="text" class="noEnterSubmit" id="txtState" name="txtState"><br><br>
        <br><br>

        <span id="lblPostCode" name="lblPostCode">PostCode</span>
        <input type="text" class="noEnterSubmit" id="txtPostCode" name="txtPostCode"><br><br><br>

    </fieldset>
</div>

CSS Code:

#main1 { width:560px; margin: 0px auto; padding:40px 20px 20px; background-color:#FFFFFF; top:50px;}
    legend { font-size:18px; margin:0px; padding:10px 0px; color:#2F9934; font-weight:bold;}
    fieldset { border-style: none;
            border-color: inherit;
            border-width: medium;
            width:322px;
            margin-left:30px;
        }
    #overlay {
          position: fixed;
          height: 100%;
          width: 100%;
          z-index: 1000000;
          color:Blue;
          background: url('/images/busy.gif');
          background-repeat:no-repeat;
          background-position:600px 390px;
          text-align:center;
        }
    #Register  label { display:block; margin:15px 0 5px;}
    #Register  input[type=text], input[type=password] { width:300px; }
    #Register input[type=checkbox] {padding-top:5px;}
    #Register  select {width:175px; height:19px; padding-top:5px;}

Here is the JSFiddle link.

Please provide me with guidance on what changes are needed so that the label and text boxes for "City" & "State" stay aligned in the form, one after another like the other inputs. Thank you!

htmlcss

Answer №1

The key factor here is the length of text being displayed in a single line. Since the labels "City" and "State" are shorter than the other labels, they naturally fit on one line without breaking. If you want to ensure a line break after each label, you can include this CSS rule in your stylesheet:

#Register  span { 
    display:block; 
}

Answer №2

To fix the problem, simply add CSS to the span elements with float:left.

#Registration span{
    float: left;
    width: 100%;    
}

Check out the updated version on this link

Answer №3

   #Enroll span {
    display:block;
    }

This solution will address the issue at hand.

It is recommended to utilize label instead of span.

JSFiddle Example

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

Utilizing JavaScript to retrieve data from a self-submitting form

From my database, I am able to create a list of options for users to choose from. Once a selection is made, the values are submitted back to the same page and retrieved using Javascript. Within the same form, there are radio buttons and a multiple selecti ...

javascripthtml

Having trouble with compiling SCSS code

While diving into the world of SCSS, I decided to compile my SCSS into CSS using npm. So I entered npm run compile: sass as defined in my package.json as follows: "scripts": { "compile:sass": "node-sass sass/main.scss css/style ...

cssjsonnpmcmdsass

Modifying the text color of a div class via CSS is not possible

I am currently facing an issue with styling a button made using a div. Despite my efforts to make the text white, the styling seems to be acting in unexpected ways. Below is the CSS section: .button a { text-align:center; display:block; backg ...

htmlcss

My divs are multiplying twice as fast with every iteration of the Javascript For Loop

Recently, I developed a script that generates a series of fields based on a number provided by the user (k). Initially, I had a script that would create the correct number of fields. However, I decided to arrange them like vectors on the screen, so I made ...

javascripthtmlcss

Challenges encountered when redirecting users with a combination of javascript and php

I have a login form that triggers a JavaScript function upon submission. This function calls a PHP page to process the input. The issue I'm facing is with how the redirections are displayed based on the user's role type. It attempts to display t ...

javascriptphpjqueryhtmlforms

Uncovering the jsPlumb link between a pair of identifiers

Could someone help me understand how to disconnect two HTML elements that are connected? I have the IDs of both elements, but I'm not sure how to locate their connection in the jsPlumb instance. Any tips on finding the connection between two IDs? ...

javascriptjqueryhtmljsplumb

Guide to inserting an icon within an input field

Seeking assistance in placing the checkmark icon inside the input box at the right corner. Additionally, I would like to know if it's feasible to show a 'Field Saved' message alongside the tick icon? Update: If the form contains multipl ...

htmlcssbootstrap-4input-field

CSS isn't functioning properly on 000webhost

Recently, I launched a basic website on 000webhost. The index.html file I uploaded looks like this: <!DOCTYPE html> <html lang="en> <head> <title>Tabs</title> <meta charset="utf-8"> ...

htmlcss

Enhance Your Button with CSS3 Animation

While experimenting with CSS3 animations, I encountered a challenge when trying to apply an animation to a button upon clicking. The desired effect was for the button to zoom in, spin, and then zoom out, giving the appearance of flying off the screen. Surp ...

jqueryhtmlcss

Unable to assign a value to a variable in JavaScript

Today, I delved into the world of JavaScript and decided to test my skills by creating a page that changes images when clicking on a div. Everything worked perfectly until I wanted to add an input element to specify how many steps to jump each time the but ...

javascripthtmlcssinput

Tips for positioning content within a div: Organize an image to the left, a header in the center, a description, and a link on the right

Can someone please help me with this HTML section on my webpage? I'm struggling to identify the CSS errors... <div id="publications"> <div id="singlepublication"> <div id="pubthumb"><a href="#"><img src="siteima ...

htmlcss

Choose the sequence in which CSS Transitions are applied

Currently facing an interesting challenge, but I'm confident there's a clever solution out there. The issue at hand is with a table that has three different sorting states for its columns: unsorted, where no icon should be displayed, ascending, ...

javascriptcssreactjscss-transitionsreact-table

What are the best methods for creating a significant gap in a flexbox layout?

https://i.sstatic.net/iMkPt.png I created a menu using flexbox to have only two columns and vertical scrolling for multiple menus. However, I am facing spacing issues between the menus when one menu has many children. Here is the code snippet along with t ...

htmlcss

Creating a mandatory 'Select' component in Material UI with React JS

Is there a method to show an error message in red until a choice is selected? ...

javascriptcssreactjsfrontendmaterial-ui

Struggling to load Bootstrap Tooltip within the Span Tag that encapsulates the Img tag

I am currently working on implementing a tooltip popup for images within an unordered list. I have wrapped the images in span tags with the necessary attributes, but instead of seeing the expected tooltip, I am only getting a normal tooltip when hovering o ...

javascriptjqueryhtmlbootstrap-4

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

There is a jQuery slider on my website that behaves strangely when I navigate away from the Chrome browser and return later. It seems to speed through all pending slides quickly when it was not visible. Now, I want the slider to pause when it becomes invi ...

javascripthtmljquerycss

Customize jQuery Datepicker to default to 01-01-1970 if input box is left empty

Hey everyone, I'm having a problem with the Datepicker in my input box labeled "Order Date." Here is what my input field looks like: Whenever I submit my form with an empty date field, it automatically sets to 01-01-1970. It looks like this: So, wh ...

jqueryhtml

Mini-navigation bar scrolling

I am trying to create a menu where I want to hide elements if the length of either class a or class b is larger than the entire container. I want to achieve a similar effect to what Facebook has. How can I make this happen? I have thought about one approac ...

javascriptjquerycss

Is it possible to encase <v-img> within an anchor element?

I am currently using Vuetify 1.5 and have included a couple of <v-avatars></v-avatars> elements in which there is a nested <v-img></v-img>. I attempted to enclose the img tags within an a tag but encountered an issue wherein the ima ...

javascripthtmlcssvue.jsvuetify.js

CSS's mysterious world of inline elements

I am in the process of trying to make a certain element, time, appear inline using CSS. The HTML Code is: <nav class="vertical"> <ul> <li><a href="#">Home Page</a></li> <li><a hre ...

css