setting width of label and input tags using css

I reviewed some examples here and tried to follow one, but it's not working. Can someone please tell me what I'm missing?

  fieldset {
  overflow:hidden;
  width:90%
 }
 label {
   padding-left:26px;
   width:250px; 
   display:block; float:left; clear:left;
 }

 input { 
  width:200px;
  display:block; float:left;
 }

 .formFieldDiv { float:left; width:500px }


 <td style="width:70%" align="left" valign="top">   
 <form id="divorce" name="divorce" method="post" action="send_form_email.php">
     <fieldset>
        <div id="spouse1" class="formFieldDiv" >
          <label for="spouse1">Full Names + Surname Spouse 1*</label>
          <input type="text" name="spouse1" id="spouse1" maxlength="50" size="30" />                           
        </div>
        <div id="spouse2" class="formFieldDiv">
          <label for="spouse2">Full Names</label>                       
            <input  type="text" name="spouse2" id="spouse2" maxlength="50" size="30"/> 
        </div>
     </fieldset>
 </form>
 </td>

What am I missing? I need to ensure all the inputs are in line.

Answer №1

 When using CSS, remember that formFieldDiv is a class and should be preceded by a period (.). Therefore, write your styling rules like this:
.formFieldDiv { float: left; width: 500px; } 
rather than
formFieldDiv { float: left; width: 500px; }

Answer №2

Include

display:inline-block;

Incorporate this code into your label element

Answer №3

<div id="partner1" class="formFieldDiv" >
       <label for="partner1">location</label>                
       <input type="text" name="partner1" id="location" maxlength="50" size="30" />                          
     </div>

change </div>> to </div>

Please make sure to review your send_form_email.php file

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

Ways to retrieve all elements, including those that are hidden, within a CSS grid

My goal is to retrieve all the "Available Items" using Javascript in one go. However, I am facing an issue where not all of them are visible at once due to the need to manually scroll through a CSS grid. <div class="gridWrapper" data-dojo-attach-point= ...

Creating a CSS dropdown menu with absolute positioning and setting the left position to auto

Just laying out my usual HTML menu structure: <div id="page"> <h1>Home</h1> <ul id="nav"> <li><a href="http://example.com/">Home</a> <ul> <li><a href="http://examp ...

Does anyone know how to designate a Thumbnail when playing Audio on iOS Safari?

I recently launched a website to showcase my new podcast. The audio is embedded in a media player on the page, and when it's playing, it shows up on the Control Center audio tab and even on the lock screen. However, the thumbnail displayed is just a ...

Ways to adjust CSS styles according to the height of various device screens

Is there a way to adjust CSS/SCSS rules in applications like Angular based on the viewport height of various devices? When dealing with viewport width, we can use @media (max-width: ...) {}, but how can we address the height aspect? For instance, how wou ...

jQuery registers the enter event, but does not proceed to trigger the enter action

Hey there, I've been experimenting with jQuery to capture the enter event. Something peculiar is happening though - after pressing enter in the text area, an alert pops up but the text gets entered only after that. Despite trying various solutions, I ...

Why is my Bootstrap row exceeding the page width when I resize it?

As a newcomer to Bootstrap, I have been following tutorials to learn more about it. Currently, I am attempting to recreate the layout of Google's homepage. However, I am facing challenges with the grid system's responsiveness. I have managed to ...

What is the process of displaying data from a MySQL database on a label using PHP?

I am seeking a way to retrieve form labels from my Mysql database in order to efficiently display them in any language using select statement. Although I have attempted this method, it has proven difficult due to the various languages involved. A ...

Issue with Bootstrap dropdown functionality within a Bootstrap modal

I am attempting to incorporate a bootstrap dropdown in a form that will be displayed within a bootstrap modal. <div class="modal fade box-sizing" id="createPerson"> <form enctype="multipart/form-data" method="post" name="personCreateForm" novali ...

Add a background color to a drop-down selection box on Mozilla

I am trying to add a background color to a select box. My code successfully adds the background color to the options in Chrome, but not in Mozilla. How can I apply the background color to the select box in Mozilla as well? https://i.sstatic.net/TYU6R.png ...

Issue with Angular uploading a file and sending it as a POST request causing errors

I am currently working on an HTML form that allows users to upload files from the front-end to the back-end and perform various operations on them: <button mat-raised-button color="primary" type="button" style='margin-right:20px ...

JavaScript: Navigating Through Frames and iFrames in Internet Explorer

Is there a way to run JavaScript code after my iFrames or Frames have finished loading? It seems like document.onReady fires before the frames are actually displayed on the page. Any ideas on how to make this work? I came across a plugin called FrameReady ...

WordPress does not recognize the jQuery function

I have encountered an issue with my code where a simple HTML jQuery slider works fine in a standalone file, but when I integrate it into WordPress, it no longer functions properly. The slider is being added to the index.php file by hardcoding the script li ...

Problems with aligning elements to both the left and right sides of the same line

Currently, I have two divs that I would like to float on the left and right sides. However, they seem to be sticking together and I can't seem to separate them.. HTML: <nav> <div id="nav_content"> <div id="home_ico ...

"Troubleshooting a matter of spacing in HTML5 body

I've been struggling to eliminate the gap between the top of my webpage and the <div> element. Here's the code snippet causing the issue: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="v ...

Develop a custom dropdown menu using JavaScript

I've been working on creating a dropdown menu that appears after selecting an option from another dropdown menu. Here's the HTML code I'm using: <br> <select id ="select-container" onchange="addSelect('select-container') ...

relocate the image with an identical filename stored in the variable

Having trouble moving an image to a new position when clicking on its small thumbnail. I've attempted using jquery's find() function but it doesn't seem to be working... $('#slide1_controls img').click(function (event){ var sr ...

Video from Brightcove continues to play even after closing the modal dialog

My concept for opening a Brightcove video in a modal dialog when a button is clicked has been successfully implemented. Below is the code snippet I used for this implementation: Html code: <a class="videoTutorialB" href="#">Watc ...

Ensuring the HTML remains at its original scale while scaling a div using CSS

My code consists of HTML and CSS that look like this: <div class="box" style="transform: scale(2);"> <div class="text">This is my text.</div> </div> I'm trying to figure out how to prevent the text inside the box from sca ...

.flex-grow-1 in react-bootstrap does not expand to fill vertical space within <Row>

I'm having trouble using the .flex-grow-1 class in Bootstrap 4.6.0 (with react-bootstrap 1.5.2) to make a component within my layout expand and fill the remaining vertical space available. "bootstrap": "^4.6", "react-bootstrap ...

Ensure that all panels are set to the same width as the widest panel

Is there a way to make all the panels in my jQuery tabs have the same width as the widest panel? I know that heightStyle:"auto" works for adjusting the height, but is there a similar option like widthStyle:"auto"? I want to show you the current look compa ...