Having a floating left <UL> list with floating right text boxes positioned below the UL list instead of being set next to it

I'm attempting to align an unordered list on the left and a group of textboxes on the right within a div tag. The problem I'm facing is that the text boxes are positioned below the list items instead of being adjacent to them.

.PersonLI
{
   float: left;
   clear: both;
   width: 100px;
   margin-bottom: 10px;
}
.PersonBox
{
   float: right;
   clear: both;
   width: 99px;
   margin-bottom: 10px;
}
.FirstObj
{
    border: 1px solid black;
    margin-left: 100px;
    width: 300px;
    height: 200px;
}    
<div class="FirstObj">
   <ul style="list-style: none;">
      <li class="PersonLI">First Name:</li>
      <li class="PersonLI">Last Name:</li>
      <li class="PersonLI">Address:</li>
      <li class="PersonLI">City:</li>
      <li class="PersonLI">State:</li>
      <li class="PersonLI">Zip Code:</li>
   </ul>
   <input id="txtFname" type="text" value="" class="PersonBox"/>
   <input id="txtLname" type="text" value="" class="PersonBox"/>
   <input id="txtAddr" type="text" value="" class="PersonBox"/>
   <input id="txtCity" type="text" value="" class="PersonBox"/>
   <input id="txtState" type="text" value="" class="PersonBox"/>
   <input id="txtZip" type="text" value="" class="PersonBox"/>
</div>

Perhaps the issue lies in not clearing the float on the final list item?

htmlcss

Answer №1

Your code structure could benefit from some enhancements. An optimized form following semantic guidelines would appear as follows:

.FirstObj ul {
  list-style: none;
}

.FirstObj li {
  margin-bottom: 10px;
  clear: both;
}

.FirstObj label {
  width: 100px;
  float: left;
}

.FirstObj input {
  float: right;
  width: 99px
}

<div class="FirstObj">
   <ul>
      <li>
        <label for="txtFname">First Name:</label>
        <input id="txtFname" type="text" value="" />
      </li><li>
        <label for="txtLname">Last Name:</label>
        <input id="txtLname" type="text" value="" />
      </li><li>
        <label for="txtAddr">Address:</label>
        <input id="txtAddr" type="text" value="" />
      </li><li>
        <label for="txtCity">City:</label>
        <input id="txtCity" type="text" value="" />
      </li><li>
        <label for="txtState">State:</label>
        <input id="txtState" type="text" value="" />
      </li><li>
        <label for="txtZip">Zip Code:</label>
        <input id="txtZip" type="text" value="" />
      </li>
   </ul>
</div>

Implementing label elements is recommended. You can view the optimized version here: http://jsfiddle.net/Fmzbm/

Answer №2

Can you provide an explanation as to why <label> tags are not being utilized for these fields?

In regards to your CSS inquiry, it is unnecessary to use clear:both on either of the elements if you desire them to be positioned side by side.

Answer №3

Have you thought about updating your code structure?

HTML: 


    
        
            
                Name:
                
            </li>

CSS:


.NameObject label { float:left; }
.NameObject input { float:right; }

The code suggestions seem to be off, perhaps some additional styling could help.

Answer №4

Check out this demo for a possible solution.

To customize the width of the li CSS rule to better fit your needs, consider adjusting the markup and utilizing the more semantically appropriate label tag. This approach also eliminates the need for using the float property, which can sometimes cause unexpected layout issues when the HTML content is reorganized.

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

Executing 'npm start' to launch an HTML file along with a CSS stylesheet - A step-by-step guide

As a newcomer to the world of coding, I've found that asking questions on platforms like Stack Overflow enables me to connect with fellow developers. I usually code using VS Code and rely on the "live server" extension to quickly test my code. Howeve ...

htmlcssnpmvisual-studio-code

Unable to scroll after the webpage redirects

I am currently working on developing a website for uploading images with a comment feature. The comments section is displayed below the image in the 'imagedisplay.php' file. If a user is not logged in, they are redirected to the sign-up page and ...

javascriptphpjqueryhtml

Create objects in the gallery

I recently developed a React Material-UI component using Typescript: <Grid container direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid item xs={5}> <B ...

javascriptcssreactjstypescriptmaterial-ui

Creating HTML content using Racket

Is there a straightforward method for converting X-expressions to HTML in Racket without using response/xexpr? It appears that this function is mainly intended for serving http responses, but I only need to convert Racket lists (or X-expressions) into an ...

htmlracket

The HTML video controls in Safari take precedence over the window.name attribute

When using Safari 8.0.5, the controls attribute for the video element will change the value of window.name to "webkitendfullscreen". This is significant because I rely on using window.name to store client-side data in Safari's private mode, where loca ...

javascripthtmlsafari

Maintaining a sticky footer that remains visible throughout the content as the screen is resized

For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...

htmlcss

Unable to submit multiple forms simultaneously on the same HTML page

I have been encountering an issue with forms in a particular file. The problem arises when I click submit, rather than submitting the data from the filled form, it submits the data from the first form. Despite specifying unique ids for each form as shown i ...

phphtmlforms

Utilizing Django framework for crafting a captivating homepage

Successfully set up the django framework and developed an app for my homepage. I added the app to the settings in the project folder and was able to get the HTML running smoothly. However, I am experiencing issues with styling as the CSS won't apply. ...

pythonhtmlcssdjango

The differences between xPages and HTML templates are evident in the varying sizes of their elements

When using a html template in an xPages application, I noticed that all elements appear slightly larger compared to a plain html page. Even when checking the values in Chrome debugger, they all seem to be the same. ...

htmlcssxpages

Define the term "Parse Error" as it pertains to CSS

i'm encountering an issue while attempting to validate my CSS. Despite trying to validate using direct input (copy and paste), the error persists. In my pursuit to find a solution, I researched on Google only to discover that it could be related to sp ...

htmlcss

How can I centrally align the text(link) vertically in relation to its background image?

After setting the background color, height, and width of a link using CSS, I managed to align the text(link) center horizontally by applying the "text-align: center" property. However, I am facing difficulty in vertically centering it with respect to its ...

htmlcss

What causes padding/margin when using overflow: hidden?

Today, I came across a peculiar issue. Adding the overflow: hidden style to a div seems to create extra blank space around its header content, resembling margin or padding. While this might go unnoticed in most cases, it's causing a problem with an an ...

cssangularbootstrap-4

What could be causing the issue with absolute positioning not functioning correctly?

I'm having trouble keeping my footer at the bottom of the page: body, html{position:relative;} footer{position:absolute;} Even when I use bottom: 0;, the footer doesn't seem to go all the way to the bottom. Is there anyone who can help me troub ...

htmlcss

A method for highlighting duplicate rows in a DataTable by formatting them with the same color

I am currently utilizing the DataTable plugin to display rows in a table. I would like to highlight duplicate rows in the same color scheme. Can someone please assist me with this issue? In the example below, the entry for Black Winters is duplicated. I ai ...

javascriptjqueryhtmldatatabledatatables

Concealing inactive select choices on Internet Explorer versions greater than 11 with the help of AngularJS

I am having trouble hiding the disabled options in AngularJS specifically for IE. Check out this fiddle for a better idea: https://jsfiddle.net/s723gqo1/1/ While I have CSS code that works for hiding disabled options in Chrome/Firefox, it doesn't see ...

htmlcssangularjsselectdrop-down-menu

PHP is experiencing issues when trying to insert data into the database

When I run a query in phpMyAdmin such as INSERT INTO table('نچجاعجان'); it appears correctly, but when I try to insert data through my PHP page, it displays in the field like this: ÙاننناÙنعن The col ...

phphtmlmysqlutf-8

transferring data from one HTML file to another using a loop with technologies such as HTML,

As a beginner in front end development, I am finding it a bit challenging at the moment. Here's what I have so far: 1 main HTML file (index.html) 1 JavaScript file (something.js) 2nd HTML file (something.html) Main HTML: <!DOCTYPE html> < ...

javascriptjqueryhtmlcssajax

Selenium Alert: Inaccessible Element Encounter (cookie and other pop-up)

I'm attempting to click a button using Selenium so that I can inspect the full HTML of a website. Here's the code I've written: driver = webdriver.Chrome() driver.get('https://www.quattroruote.it/listino/audi/a4-allroad') time.slee ...

pythonhtmlseleniumbeautifulsoupinspect

Tips for retrieving formatted text layout from the database

I recently encountered an issue when adding text to my MySQL database using a textarea. The format of the text, including newlines and spaces, was saved in the database but not displayed as such when viewed directly. When I retrieve this string from the da ...

sqlcssdatabase

What is the correct way to write the syntax for wp_register_style function in

I'm attempting to include a cache-buster version in my CSS file. The guides mention: <?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?> However, I've scoured Google and Stack Overflow for the correct formatting of these var ...

phpcsswordpress