The left side inputs are contingent upon the div

I am faced with a challenge involving two inputs inside a div.

Below is the code snippet:

<div style="width:100%;height:500px;border-style:solid;border-color:#1d69b4;margin-top:25px;">
        <div style="float:left; width:70%;height:100%;">
            <div style="width:100%;height:30%;">
                <form>
                  <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/>
                  <input class="form-control" type="text" id="lname" name="lname" placeholder="From" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/>
                </form>
            </div>
        </div>
    </div>

The issue lies in the fact that they are floating to the left due to the div element.

My desired layout is as follows:

<div style="width:100%;height:500px;border-style:solid;border-color:#1d69b4;margin-top:25px;">
        <div style="width:100%;height:30%;">
          <form>
            <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/>
            <input class="form-control" type="text" id="lname" name="lname" placeholder="From" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/>
          </form>
        </div>
      </div>

However, I want the div element to float to the left. How can I achieve this?

javascriptjqueryhtmlcss

Answer №1

The items are aligned to the left, but the container div is not wide enough to display them side by side.

For example, if you have two 50% divs inside a 100% div, they will overflow because of added whitespace.

To prevent this, try adding 'white-space: nowrap;' to the parent div:

<div style="width:100%;height:500px;border-style:solid;border-color:#1d69b4;margin-top:25px; white-space: nowrap;">
    <div style="float:left; width:70%;height:100%;">
        <div style="width:100%;height:30%;">
            <form>
                <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/>
                <input class="form-control" type="text" id="lname" name="lname" placeholder="From" style="padding: 12px 20px;margin: 8px 0;box-sizing: border-box; border-radius:50px;"/>
            </form>
        </div>
    </div>
</div>

Answer №2

1)It is suggested that the container should be set to 70%, in this case, you can utilize Media Queries to adjust the width of the Text Box accordingly.

2)Using the same name for two different elements with an ID attribute is incorrect. Each ID name must be unique, so I have changed the 'lname' to a Class name instead.

.wrapper {
width:100%;
height:500px;
border-style:solid;
border-color:#1d69b4;
margin-top:25px;
}

.container {
float:left;
width:70%;
height:100%;
}

.frm {
width:100%;
height:30%
}

.lname {
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
        border-radius:50px;
}

@media screen and (max-width: 653px) {
.lname {
width: 150px;
}
}

@media screen and (max-width: 477px) {
.lname {
width: 50px;
}
}
<div class="wrapper">
    <div class="container">
        <div class="frm">
                <form>
                  <input type="text" class="form-control lname" name="lname" placeholder="Last Name">
                  <input type="text" class="form-control lname" name="lname" placeholder="From">
                </form>
        </div>
    </div>
</div>

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

Utilize CSS in the same way as the legend tag styling

I'm looking to create a stylish border around my HTML component. While I know the HTML legend element can achieve this, I want to use it outside of a form. For reference on using HTML Legend: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml ...

htmlcsslegend

Tips for avoiding the automatic focus on text fields that occurs when utilizing the placeholder attribute in HTML5

Imagine having a form with the placeholder attribute set as follows: <input type="text" name="something" placeholder="username" /> <input type="text" name="somethingelse" placeholder="password" /> Upon visiting the page with this form, the fi ...

jqueryformshtml

Experience the auditory bliss with Javascript/Jquery Sound Play

I am creating an Ajax-driven application specifically for our local intranet network. After each response from my Ajax requests, I need to trigger a sound in the client's browser. I plan to store a sound file (mp3/wav) on our web server (Tomcat) for ...

javascriptjquery

What are the steps to create a Node.js application and publish it on a local LAN without using Nodemon?

When working on a Node.js application, I often use the following commands to build and serve it locally: //package.json "build": "react-scripts build", To serve it on my local LAN, I typically use: serve -s build However, I have been wondering how I ...

javascriptnode.jsexpress

Adjust the size of the iframe image to fit seamlessly within the design

Is there a way to adjust the size of the image on the right without altering the layout design? The current GIF is 500x500px, but it is only displaying as 100x100px. Any assistance would be greatly appreciated! To see what I currently have (Demo with code ...

javascripthtmlcsslayoutresponsive

Image source not functioning properly

I am attempting to dynamically load an image and HTML using Angular but it doesn't seem to be working. Here is what I have tried: <img ng-src="img/{{product.Category}}/{{product.id}}.jpg"> and also this: <img src="img/{{product.Category}}/ ...

htmlangularjs

Do jQuery and AJAX both support application/json content type in all web browsers?

I have been managing my ajax requests like this: @header("Content-Type: text/html; charset=".get_option('blog_charset')); and in the JavaScript: $.ajax(.... ... success: function(response){ var obj = eval('('+response+') ...

jqueryhtmlajaxjson

Showing a PHP echo statement in an HTML div with the help of jQuery

I am looking for a way to showcase the echo text generated by PHP on a separate HTML page. I attempted to use jQuery for this purpose, but it proved unsuccessful. Please do not dismiss this question as I have gone through all the previous posts related to ...

phpjqueryhtmlajaxcordova

Using Javascript, it is possible to generate a new JSON object through manipulation of an already

I have a JSON object that I am manipulating to create a new JSON object. The challenge lies in dynamically constructing a part of the JSON object. Below is the original JSON object: [{"acptFlag":true,"count":14288,"limsFlag":true,"plantId":30,"plantName": ...

javascriptjson

How can I eliminate the empty spaces around a bar chart in Kendo UI?

Struggling to eliminate the extra space surrounding the Kendo UI chart below. Could this be due to a gap or spacing issue? The goal is to create a single-line bar chart with only grey appearing on the right side. Access JSFiddle Codes Here $(doc ...

javascriptjquerycsskendo-uikendo-dataviz

The function you are trying to call in Node.js is not defined

Just starting out with NodeJs and trying to implement async/ series, but encountering an error: task.save is not a function Here is the code snippet I am working with: async.series([ (cb) => { Task .findById(id) ...

javascriptnode.js

Send a request to templateUrl

After experimenting with AngularJS, I decided to create a dynamic route system that funnels all routes through a single PHP file. This was motivated by my desire to prevent users from accessing raw templateUrl files and seeing unstyled partial pages. Prio ...

javascriptajaxangularjs

Is there a way to improve scrolling speed on Mobile Safari?

I'm currently working on a project utilizing angularjs and bootstrap, aiming to replicate iOS's navigationController feature. However, I'm encountering speed issues, particularly when scrolling between views on mobile safari iOS. The transi ...

javascriptangularjsmobile-safari

Aligning a div within another div with an image

My current setup looks like this: HTML: <div class="wrapper"> <img src="image.jpg" /> <div class="circle"> X </div> </div> CSS: .circle { width:50px; height:50px; border-radius:50%; background: #FF0000; } ...

jqueryhtmlcss

AngularJS: default option not being selected in dropdown menus

I need assistance with a dropdown list issue. See the code snippet below: My Controller (function(angular) { 'use strict'; angular.module('ngrepeatSelect', []) .controller('ExampleController', ['$scope', functi ...

javascriptangularjsdropdown

Why are my custom material UI styles not showing up after the deployment?

I was attempting to customize a material UI element, specifically trying to increase the size of the icon. Below is the style code I used: export const Icon = styled(Box)({ color: "gray", position: "relative", "& ...

cssreactjsmaterial-ui

Is all of the app fetched by Next.js when the initial request is sent?

After doing some research online, I learned that Next.js utilizes client-side routing. This means that when you make the first request, all pages are fetched from the server. Subsequent requests will render those pages in the browser without needing to com ...

javascriptnode.jsreactjsnext.js

The cookie's expiration time is being set to 1 hour, rather than the specified maxAge duration

My file contains a cookie that consistently sets to 1 hour as the default, even when I specify a maxAge of 12 seconds. res.cookie("my-cookies", req.body.id_token, {maxAge: 12000, httpOnly: false}); ...

javascriptnode.jsexpress

Locate the positions of 2 identification numbers within a Mongoose array

I am currently working on developing a middleware that validates if a conversation exists between two users in the database. If the conversation does not exist, the middleware will create a new conversation. I am attempting to utilize Mongoose's $in o ...

javascriptnode.jsmongodbmongoose

Ways to obtain the ID of the following element using jQuery

Here is some HTML code, and I am trying to retrieve the ID of the next element from a clicked element with the class name "coba" or to get the ID of an element with the class name "coba2." <div class="dropdown"> <label>Category</label> ...

javascriptjqueryhtml