Choosing the Right Alignment for Your Selection Box

How can I adjust the alignment of the select box to make it inline with the others? I also need to apply this alignment to the three option input boxes.

CSS:

#newwebsiteSection, #websiteredevelopmentSection, #otherSection{
    display:none;
}
#newwebsiteForm form{
    padding:10px;
    margin:10px 0;
    width:480px;
    position: relative;
}
#newwebsiteForm label{
    display:block;
    float:left;
    clear:both;
    margin:0 15px 0 25px;
    width:240px;
    border:1px solid green;
}
#newwebsiteForm input{
    display:block;
    float:left;
    width:240px;
    height:15px;
}
#newwebsiteForm .radioButton {
    width:15px;
    height:15px;
}
#newwebsiteForm .radioText {
    display:block;
    width:30px;
    height:20px;
    float:left;
    font-size:12px;
    border:1px solid red;
}

#newwebsiteForm select{
    margin-left:123px;
}

#newwebsiteForm #color1,#color2,#color3,#fav1,#fav2,#fav3{
    display:block;
    float:left;
    margin-left:25px;
    background-color:red;
}

#newwebsiteForm textarea{
    display:block;
    float:left;
}

HTML:

        <section id="content">
            <h1>Free Quote</h1>
                <p>Please complete the questionnaire below for a free quote on web development.</p>
                    <form action="#" method="post">
                        <select name="requiredOption" id="requiredOption">
                            <option id="pleaseselect" value="pleaseselect">Please Choose Your Desired Quote</option>
                            <option id="newwebsite" value="newwebsite">New Website</option>
                            <option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option>
                            <option id="other" value="other">Other</option>
                        </select>
                    </form>
                    <div id="newwebsiteSection">
                        <form action="#" id="newwebsiteForm" method="get">
                        <fieldset>  
                        <label>Do You Need Hosting?</label>
                            <span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
                            <span class="radioText">No</span><input  class="radioButton" type="radio" name="No" value="No"/>

                        <label>Do You Need A Domain?</label>
                            <span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
                            <span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>

                        <label>Do You Have A Logo?</label>
                            <span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
                            <span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>

                        <label for="domain">What is your Domain?</label>
                        <input type="url" id="domain" value="http://example.com"/>

                        <label for="newwebsiteType">Type of Site Needed?</label>
                            <select name="newwebsiteType" id="newwebsiteType">
                            <option value="shoppingCart">Shopping Cart</option>
                            <option value="CMS">Content Management System</option>
                            <option value="static">Static Website</option>
                            <option value="otherDevelopment">Other Development</option>
                        </select>

                        <label>Do You Want a Design?</label>
                            <span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
                            <span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>

                        <label>Pick Three Favorite Colors:</label>
                            <input id="color1" value=""/>
                            <input id="color2" value=""/>
                            <input id="color3" value=""/>

                            <label>Share Your Favorite Websites:</label>
                            <input type="text" id="fav1" value=""/>
                            <input type="text" id="fav2" value=""/>
                            <input type="text" id="fav3" value=""/>

                        <label for="comments">Any Comments?</label>
                        <textarea name="comments" id="comments"></textarea>

                        <input type="submit" name="submit" value="Request Quote"/>
                        </fieldset>
                        </form>
                    </div>
                        <div id="websiteredevelopmentSection">
                            <p>Website Redevelopment</p>
                        </div>
                            <div id="otherSection">
                                <p>Other</p>
                            </div>

</section>

htmlcssformsalignment

Answer №1

Your CSS form selector needs correcting.

#newwebsiteForm{}

I made some adjustments to your HTML and CSS for this layout:

HTML - Wrap label/input pairs in a div. This makes styling much easier. I wrapped Hosting and Domain pairs so that they display on separate lines in IE7.

<div>
    <label>Do You Need Hosting?</label>
    <span class="radioText">Yes</span>
    <input class="radioButton" type="radio" name="Hosting" value="Yes"/>
    <span class="radioText">No</span>
    <input  class="radioButton" type="radio" name="Hosting" value="No"/>
</div>
<div>
    <label>Do You Need A Domain?</label>
    <span class="radioText">Yes</span>
    <input class="radioButton" type="radio" name="Domain" value="Yes"/>
    <span class="radioText">No</span>
    <input class="radioButton" type="radio" name="Domain" value="No"/>
</div>

The .form-field class helps align the inputs. Another wrapper aids formatting in IE7.

<div>
    <label>Top Three Colors?</label>
    <div class="form-field">
        <input id="color1" value=""/>
        <input id="color2" value=""/>
        <input id="color3" value=""/>
    </div>
</div>
<div>
    <label>Favorite Websites?</label>
    <div class="form-field">
        <input type="text" id="fav1" value=""/>
        <input type="text" id="fav2" value=""/>
        <input type="text" id="fav3" value=""/>
    </div>    
</div>

CSS

#newwebsiteForm label{
    height:15px
}
#newwebsiteForm select{
    /*margin-left:123px*/
}
input#domain,
#newwebsiteForm select,
.form-field{float:right;width:200px;margin-top:-15px}

.form-field{width:220px}

See a demo here: http://jsfiddle.net/mjcookson/GTd9J/

Cheers :)

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

Adhering to a modular approach to design

I am facing an issue with two modules: One is the .master-header and the other is the .header-nav The .header-nav is contained within the .master-header and consists of a simple navigation menu: <nav class="header-nav"> <ul> ...

cssmodulebem

How can AngularJS handle uploading multipart form data along with a file?

Although I am new to angular.js, I have a solid understanding of the fundamentals. My goal is to upload both a file and some form data as multipart form data. I've learned that this is not a built-in feature of angular, but third-party libraries can ...

javascriptformsangularjspostmultipartform-data

Create text that alternates between blinking and changing content simultaneously

I'm currently working on a website and I am curious about how to achieve the effect of making text blink and change content simultaneously, similar to what is seen on this particular website . Sorry for not being more specific in my question. Thank yo ...

javascriptjqueryhtml

Rendering HTML strings instead of HTML in ReactJS

When I try to display HTML, all I see is strings var ref = firebase.database().ref('raffle/'); ref.on('value', (snapshot) => { var content = ``; var IDwrapper = document.getElementById('raffleFeed'); snapshot.forEac ...

javascripthtmlreactjsfirebase

After a two-second period of inactivity, the buttons on the item should trigger an action

I have a scenario in mind that I want to implement: When the user clicks on either the "Plus" or "Minus" button. If the user doesn't click on any of those buttons within 2 seconds, then we assume that the current quantity should be sent to the server ...

javascripthtmljqueryajax

Design interactive elements such as buttons and input fields inspired by the layout of Google websites

Does anyone know how to achieve the sleek, lightweight buttons and text boxes seen on Google's web pages like Google Search, Google Plus, and Google Play? I am currently using JSP and CSS, but I am open to incorporating jQuery if necessary. Any help w ...

jquerycssjsp

Using React and TypeScript to enable file uploads

Seeking assistance in creating a basic single select upload component. When I click a button that contains a hidden input field, the file dialog opens and allows me to choose a file. The placeholder then changes to display the selected file name along with ...

javascripthtmlreactjsreact-hooksmaterial-ui

How to turn off the default print media query in Zurb Foundation 5 without relying on SASS

I've been having trouble with printing website pages that are built using Zurb Foundation 5. Whenever I try to print or preview the page, it defaults to the `medium` grid size and looks different from how it appears on the desktop version. I've ...

htmlcsszurb-foundation

Creating an indentation on one side of a div using CSS for a visually appealing effect

https://i.stack.imgur.com/io6m0.jpg I'm in the process of trying to create two shapes using CSS. I've been able to almost achieve the first shape on the left, but it extends out too far. As for the second shape, I'm having difficulties cre ...

csscss-animationscss-shapes

Tips for Positioning Sidebar Elements Relative to Content IDs

My goal is to have sidebar elements align with specific id tags in the main content, rather than just stacking up one after another. I want the sidebar elements to align with certain id tags mentioned in the main post content. The image at shows the basic ...

htmlcsssidebar

Having trouble locating HTML elements by their id when typing into a box using cy.get in Cypress with JavaScript

I am a novice in working with cypress and HTML, and I am currently attempting to enter an address in the specified address field. <input type="text" title="Street Address 1" name="billing[street][]" id="billing:street1" value="" class="input-text " ...

javascripthtmlcypress

Manipulate HTML Table to Obtain Value of First Column Cell When Another Cell is Clicked using Javascript

I have a PHP web application where I am retrieving data from MySql and displaying it in the HTML table below. <table id = "table" width="500px" cellpadding=2 celspacing=5 border=2 > <tr> <th>Subject Code</th> <th>Subje ...

javascriptphphtmlhtml-table

Cross-Browser Compatibility of CSS

I have noticed that lists styled with the following CSS code appear differently in Internet Explorer 8 and Firefox 4. In IE8, the rounded corners are missing, while FF4 does not change color when hovering over it. Which browser should I trust for accurate ...

cssbrowser

Code snippet for adding a div element with an embedded image using JavaScript

I am attempting to create a function that generates three div elements, each containing an image, and then appends them to the body using a for loop. As a beginner in JavaScript, I am struggling with this task. Can anyone please provide guidance on what ...

javascripthtmlfunction

Uniform height across certain thumbnail images

I have hit a roadblock while working on a project, and I am unable to resolve it :) I am using the Bootstrap grid system and I want to display thumbnails within a content section, with six thumbnails per row. The issue is that while the text below each ima ...

csshtmlheightmultiple-columns

Issue with Displaying Local Server Image in Angular 2 HTML

I am facing an issue with my Angular 2 Application. It retrieves items from a local database where the server stores the image of the item and the database stores the path to that image stored on the server. While I can retrieve all the items without any p ...

htmlangularimagetypescripturl

What is the best way to apply an animation class to a modal upon clicking a button?

When I click the "x" button on the modal, I want the animation to occur. However, what currently happens is that the modal closes without the animation. Then, upon reopening the modal, the animation occurs without any clicking involved. Below is my curren ...

javascripthtmlcssbootstrap-5

How can I convert a background image source into a fluid list item with a display property of inline-block?

I have a unique image with dimensions width: 656px and height: 60px that serves as the background for my menu. Each menu button has a specific position within the image, for example, the menu button for 'media' is located at (188x, 0y), with a wi ...

cssfluid-images

What seems to be the issue with my 2-column design layout?

When I try to arrange my webpage with a 2 column layout, adding an image messes up the footer. Without the image, the footer looks correct. <!DOCTYPE html> <html lang="en"> <head> <title>SuperRestraunt</title> ...

htmlcss

`How to perfectly place multiple text blocks and images using CSS`

Check out this screenshot to see the issue I'm facing: Here is the HTML code: <div class="parent_process"> <div class="first_process"><img src="images/exprimer-besoin-telephonie.png"/><span style="width:18%">You fi ...

htmlcss