What is the best way to position divs within a container that is 50% width and 50% height?

Hey there! I'm trying to set up a form with two equal columns using the HTML and CSS3 code below. However, it seems like something is causing the second label "upto" to be positioned in the right corner. Please refer to the attached screenshot for more clarity. Any help in resolving this issue would be greatly appreciated.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="./css/jquery.mobile-1.4.0.css">
        <script src="./script/jquery-1.10.2.js"></script>
        <script src="./script/jquery.mobile-1.4.0.js"></script>

        <link rel="stylesheet" href="./css/riders.css">
        <link rel="stylesheet" href="./css/jquery.mobile-1.4.0.css">
        <div class="details-fst">
    </head>
    <body>
<div id ="prd_content" data-role="content">
    <div class="details-fst">
        <div>
            <div  class="pre">
                <label class="myRiderlabel riderfonts" id="riderlabel1" data-role="none" for="amt">my Value</label>
                <input class="myRiderbox riderfonts" data-role="none" id="amt" name="amt" type="text" value="" required>
            </div>
            <div class="pre">
                <label class="myRiderlabel riderfonts" id="riderlabel2" data-role="none" for="pre">Amount</label>
                <input class="myRiderbox riderfonts" data-role="none" id="pre" name="pre" type="text" value="" required>
            </div>
        </div>
        <div>
            <div  class="pre">
                <label class="myRiderlabel riderfonts" id="riderlabel1" data-role="none" for="amt">upto</label>
                <input class="myRiderbox riderfonts" data-role="none" id="amt" name="amt" type="text" value="" required>
            </div>
            <div class="pre">
                <label class="myRiderlabel riderfonts" id="riderlabel2" data-role="none" for="pre">Payment Duration</label>
                <input class="myRiderbox riderfonts" data-role="none" id="pre" type="number" name="quantity" min="1" max="5" value="" required>
            </div>
        </div>
        <div>
            <div  class="pre">
                <label class="myRiderlabel2 riderfonts" id="riderlabel1" data-role="none" for="amt">frequency</label>
                <input class="myRiderbox riderfonts" data-role="none" id="amt" name="amt" type="text" value="" required>
            </div>
            <div class="pre">
                <label class="myRiderlabel2 riderfonts" id="riderlabel2" data-role="none" for="pre">Duration</label>
                <button class="submitbtn" id="submit" data-role="none" type="submit" onclick="chooseLan()">Submit</button>
            </div>
        </div>
    </div>  
</div>

CSS: 

.myRiderbox {
    min-height: 0.5% !important;
    padding: 1% !important;
    width: 20% !important;
    margin: 1%;
    text-align: left;
    background: none repeat scroll 0% 0% white;
    border: 1px solid rgb(221, 235, 244);
    border-radius: 5px;
    color: rgb(102, 102, 102);
    outline: medium none;
    height: 22px;
}

.myRiderbox2{
    min-height: 0.5% !important;
    padding: 1% !important;
    width: 20% !important;
    margin: 8% 1%;
    text-align: left;
    background: none repeat scroll 0% 0% white;
    border: 1px solid rgb(221, 235, 244);
    border-radius: 5px;
    color: rgb(102, 102, 102);
    outline: medium none;
    height: 22px;
}

.myRiderlabel {
    min-height: 0.5% !important;
    padding: 2% 0% !important;
    margin: 1% 1% !important;
    text-align: left;
    color: rgb(102, 102, 102);
    outline: medium none;
    height: 22px;
}

.myRiderlabel2 {
    min-height: 0.5% !important;
    padding: 4% 0% !important;
    margin: 2% 1% !important;
    text-align: left;
    color: rgb(102, 102, 102);
    outline: medium none;
    height: 22px;
    float: left;
}

#riderlabel1{width: 22% !important;}
#riderlabel2{width: 12% !important;}

.riderfonts {
    color: rgb(0,106,182);
    font-size: 1em !important;
    font-family: "Times New Roman", Times,serif;
    font-style:normal
}

.submitbtn {
  background: #9ACD32;
  background-image: -webkit-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: -moz-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: -ms-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: -o-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: linear-gradient(to bottom, #9ACD32, #9AC9922);
  -webkit-border-radius: 6;
  -moz-border-radius: 6;
  border-radius: 6px;
  font-family: Arial;
  color: #ffffff;
  font-size: 16px;
  padding: 8px 17px 8px 16px;
  text-decoration: none;
}

.submitbtn:hover {
  background: #9ACD32;
  background-image: -webkit-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: -moz-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: -ms-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: -o-linear-gradient(top, #9ACD32, #9AC9922);
  background-image: linear-gradient(to bottom, #9ACD32, #9AC9922);
  text-decoration: none;
}

Many thanks!

htmlformscssjquery-mobilemargin

Answer №1

I have crafted a fresh CSS file specifically tailored for you, including the placement of HTML div tags designed to enhance your web layout.

// Custom CSS Styles

.Container {
    width:600px;
    height:220px;
    padding:5px;
    border:dotted #808080 1px;
}

.LeftColumn {
    width:285px;
    height:200px;
    margin-left:5px;
    margin-top:10px;
    border:dotted #808080 1px;

}

.RightColumn {
    width:285px;
    height:200px;
    margin-top:-200px;
    margin-left:300px;
    border:dotted #808080 1px;
}



// HTML Markup
<body>
<div class="Container">
    <div class="LeftColumn">Container for column 1</div>
    <div class="RightColumn">Container for column 2.</div>
</div>
</body>

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

What exceeds the size of the HTML tag?

I noticed that the height of my section with id "the-view-port" is set to 100vh in my page like this: <html> <body> <section id="the-view-port"> However, I am experiencing an issue in Chrome (Version 73.0.3683.86) where there seem ...

cssgoogle-chrome

React Material UI Slider component

I'm currently using the react material UI slider and I'm trying to change the default blue color of the pointer to pink. I attempted to modify the thumb and finger within the withStyles object, but unfortunately, it didn't have the desired e ...

javascriptcssreactjsmaterial-uislider

Keep the navigation bar in motion as the page is scrolled

I am currently designing a webpage with Bootstrap and have a fixed top navbar along with a side navbar that uses scrollspy for content navigation. However, as I scroll down the page, the side navbar remains static and does not move along. I would like both ...

htmlcssbootstrap-5

Safari shows a contrasting outcome

Having an issue with compatibility in the safari browser You can check out the site here: The problem lies with the text inside the image, I want it to display properly like it does in Chrome. Here is the desired result for Safari as well. Below is the ...

htmlcsssafariintegration-testing

Steps for creating a SlideMenu:

"The function defined below is meant to create a slideMenu on the left side of the index page. However, it seems like I have overlooked something as the slide Menu doesn't work." <!DOCTYPE html> <html> <head> <title>Respon ...

javascripthtmlcss

Could you explain the significance of the code "a[href*=#]:not([href=#])"?

I'm a bit confused about the meaning of this code. Can someone explain it to me? a[href*=#]:not([href=#]) Appreciate the help! ...

htmlcsscss-selectors

Boosting Your SCSS (SASS) Productivity

I'm curious if there are any ways to make the code below more efficient or dynamic. I've already achieved the desired result, but I'm interested in optimizing it further. The Script Any suggestions would be highly appreciated, Cheers, ...

htmlcssscriptingsass

What can you tell me about creating a dropdown tree combo box using JavaScript?

Upon reviewing my work, I noticed that the sequence of the drop-down boxes has been inadvertently reversed. This is not aligned with the desired outcome. How can I utilize a method to ensure that the order of the drop-down boxes is correct? However, this ...

javascriptjqueryhtml

What is the best way to connect added elements together?

I am currently utilizing Plupload to upload files. Due to specific requirements, I need to place FilesAdded "inside" init as demonstrated below. The issue I'm facing is the inability to utilize jQuery.remove() on elements that have been appended usin ...

jqueryhtmlplupload

Position an image in the center and add a div below it

I am seeking guidance regarding two specific questions. My objective is to showcase an image in its true size while positioning it at the horizontal center of the screen (not the exact center), followed by a div containing text directly underneath the imag ...

htmlcss

Enhance your design with dynamic hover effects

I need assistance with modifying the menu structure generated by Wordpress. Specifically, I want to change the background of #header-nav li ul.children li a when #header-nav li ul.children li ul.children li a:hover is active. Could someone provide guidanc ...

javascriptcss

Overlay one div on top of another div

Hey there, I've been working on creating something similar to this: Example However, I'm facing an issue where adjusting the top margin of "3" also affects "2" in the same way. I nested "3" within "2" to align the bottoms. html,body { marg ...

htmlcssoverlay

Discovering the power of jQuery: Calculating values based on selections from a multi-select dropdown and textbox

I need help with a HTML form that includes: 1 multi-select dropdown: Users select the name of an employee. 1 Textbox: Users input the total price. After entering the total price in the textbox, a small calculation sh ...

jqueryhtml

Empty body Jade forms are returned to signify a Node.js POST request

Utilizing Jade alongside express and node.js, I am developing a frontend for a flight log database as part of my training. Despite ensuring that my inputs have names, setting my body parser to application/json, and placing my routes after middleware declar ...

node.jsformsexpresspugform-submit

Steps for creating a border around a container Div:1. Set the width and

Seeking assistance in bordering a div with 4 fa-icons inside. The parent div is named Container, and as a result, the border is creating excessive padding on the left and right sides horizontally. Attempted nesting bootstrap grids without success. Can anyo ...

htmlcssangularbootstrap-4border

Implement Infinite Scrolling Pagination in WordPress

I'm completely new to Wordpress and currently utilizing the FoundationPress theme. My goal is to include a button that users can click on to load more posts. Essentially, I want users to see four blog posts initially and then be able to load the next ...

phphtmlajaxwordpress

How to grab selected HTML content with jQuery

I have been scouring the internet for a solution to this issue. My goal is to convert text selection start and end points into their corresponding HTML selection values. For example: HTML: test text **some <span style="color:red">te**st t</span& ...

javascriptjqueryhtmlselection

The email input should be the same red color as the other inputs, but unfortunately it is

When I enter the email address with first name and last name, it shows as invalid. However, the color on the CSS does not match. I am confused about why there is a difference between the two. I tried changing the type of email to text, but still no luck. ...

angularformsreactiveangular-custom-validators

Dropdownmenu without borders

I'm having an issue with the dropdown menu on my website - there are no borders showing. I've tried fixing it myself with no luck, so I could really use some help. As a beginner in web development, I don't have much knowledge about these thi ...

htmlcss

When clicking on the text areas, the Twitter-Bootstrap drop-down login automatically closes

Greetings! I am currently working on my first website design using JQuery. My project includes a dropdown login box created with Twitter-Bootstrap. Unfortunately, I'm facing some challenges with the JQuery script that controls the behavior of the logi ...

javascriptjqueryhtmltwitter-bootstrap