What is preventing the div container from extending to its full width?

The content on the right side of this div container is struggling to reach full width for some unknown reason.

Click here to see an image of the issue. The right column is not extending to full width.

This snippet shows my CSS code.

The 'main-content' container expands to the edges of the screen, with 'full-content' or 'full-content-flex' (if the content is next to each other) nested inside and centered on the screen. The 'fifty-fifty-content' houses both a left form and a right form. Despite attempts to adjust widths and alignments in the code, nothing seems to be effective. The only control over the form fields comes from a master CSS file.

.main-content {
    height: auto;
    margin: 0;
    background-color: #fff;
    border-top: 5px solid #666; 
}

.full-content {
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
}

.full-content-flex {
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    display: flex;
}

.sixtyfourtycontentleft {
    padding: 20px;
    text-align: left;
    width: 700px;
    border-right: 1px solid #E5E5E5;
}

.fifty-fifty-content {
    text-align: left;
    display: flex;
    padding: 20px;
    width: 50%;
    background-color: gray;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="time"] {
    border-radius: 5px;
    display: block;
    height: 30px;
    width: 100%;
    margin-bottom: 10px;
    font-size: 18px;
    padding: 10px;
    border: 1px solid #CCC;
    
}

Here is the HTML code

<section class="main-content">
            <section class="full-content-flex">
                    
                  <div class="fifty-fifty-content">
                    <form action="register.php" method="post">
                  
                    <input type="text" name="name" placeholder="Your name or organization name">
                    
                    <input type="email" name="email" placeholder="Email">
                    
                    <input type="password" name="password" placeholder="Password">
                    
                    <input type="password" name="repeatpassword" placeholder="Password Again">
                    
                    <input type="url" name="website"  placeholder="Website">
<input type="submit" name="submit1" value="Submit & Login">
</form
</div>
<div class="fifty-fifty-content">
                    <form action="register.php" method="post">
                  
                    <input type="text" name="name" placeholder="Your name or organization name">
                    
                    <input type="email" name="email" placeholder="Email">
                    
                    <input type="password" name="password" placeholder="Password">
                    
                    <input type="password" name="repeatpassword" placeholder="Password Again">
                    
                    <input type="url" name="website"  placeholder="Website">
<input type="submit" name="submit2" value="Submit & Login">
</form
</div>
</section

Answer №1

Modified the styling code

    .full-content-flex {
        max-width: 1000px;
        height: auto;
        margin: 0 auto;
        padding: 10px;
        display: flex;
        background-color: gray;     /* updated bg color   */
    }

    .fifty-fifty-content {
        /* remove color   */
        flex: 1 0 0%;
    }
    form {
        width: 100%;
    }
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="number"],
    input[type="tel"],
    input[type="time"] {
        width: -webkit-fill-available;
    }

Hoping this resolves your issue

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

Guidelines for implementing a logout feature in Django using templates

Here is my views.py file: from django.shortcuts import render from django.views.decorators.csrf import csrf_exempt import os # Create your views here. @csrf_exempt def index(request): if('loggedIn' in request.session): id = request. ...

React Scroll and Material-UI button active link not functioning correctly

Whenever the link goes to the correct page, I want to add a special background effect or change the font color. Despite trying to use CSS for this purpose, it didn't work as intended. If you want to take a look at my code on codesandbox, follow this ...

Tips on Creating a Display None Row with a Sliding Down Animation Using Javascript

I am working with a table that has some hidden rows which only appear when the "show" button is clicked. I want to know how I can make these hidden rows slide down with an effect. Here's the snippet of my code: function toggleRow(e){ ...

Identify when the user intends to open the link in a new window or tab

I am developing an AJAX application where all links on the page are JavaScript links (href="javascript:void(blahblah)"). Some of these links open small webpages in an iframe within a positioned div element that can be moved around. While this design looks ...

How to display an [object HTMLElement] using Angular

Imagine you have a dynamically created variable in HTML and you want to print it out with the new HTML syntax. However, you are unsure of how to do so. If you tried printing the variable directly in the HTML, it would simply display as text. This is the ...

Establish the lowest possible height for Angular Material Expansion Panel Content

Is there a way to specify a minimum height for the content of an Angular Material expansion panel when it is open? I have searched for examples on setting the expandedHeight and collapsedHeight for the header, but not for the content itself. The Angular Do ...

Stop automatic page refresh after submitting a jQuery post request

I've tried various solutions, but unfortunately, neither e.preventDefault() nor return false seem to be working for me. When I use prevent default ajax doesn't make post request. Even using $.post doesn't work as expected. Furthermore, addin ...

Tips on looping through a universal array and retrieving user input

My current project involves creating a news site using the Guardian API. I want to implement a search feature that allows users to input keywords and retrieve the webTitle attribute for matching elements. While I could simply insert the user input directly ...

What is quicker: loading SVG images or requesting sprite images?

Is there a recommended approach for creating a basic shape and icon that is used in various sections of the website with different colors? Should I opt for SVG or sprites? However, I wonder if there is a universally accepted solution for this issue. ...

Creating an editable list item with jQuery: A step-by-step guide

I am trying to create a user-friendly interface where users can view and edit their information in a listview. The data will be retrieved from a database and displayed in the listview. My goal is to make the listview editable, so when a user clicks on it ...

Position the tables next to each other

I have utilized Bootstrap 4 to create two tables, showcasing specifications and earning statistics separately. Both tables are enclosed within a col-xs-6 class with the intention of aligning one table to the left and the other to the right. However, at pr ...

Javascript textbox and submit button

Is there a way to generate a text box with a submit button and save the input into a JavaScript variable? ...

Manipulating elements repeatedly using jQuery

One of the issues I encountered while working with jQuery was appending a YouTube video when a button is clicked. To do this, I used the following code: onclick="$('#videogallery').append('<iframe width=725 height=398 src=http://www.yout ...

Having trouble accessing an element using jQuery(idOfElement) with a variable as the name parameter

Possible Duplicate: Issue with JavaScript accessing JSF component using ID Whenever I attempt to retrieve an element by passing a variable in jQuery(idOfElement), it doesn't work. But if I use something like jQuery('#e'), it works perfe ...

Generating SVG images that show up as black in light mode and switch to light colors in dark mode

I am currently working on a website that has the option to switch between light and dark mode, and I need my logo to adjust accordingly. The black elements of my logo should appear black in dark mode and light in light mode. I attempted using the CSS cod ...

If the iframe's CSS source is updated, the parent's CSS source will also change

I'm currently working on a unique school project that involves creating multiple CSS styles for different views. <link rel="stylesheet" type="text/css" href="css/main.css" title="main" media="screen"> <link rel="stylesheet" type="text/css" h ...

How come the focus doesn't work when altering the CSS code simultaneously?

My attempt at creating a user interface involved an issue where the input field was not visible initially. After clicking the button, the input would appear on the screen, and I wanted to automatically focus on it. This is what I tried to achieve: Initial ...

Position the image between two div containers in the center of the screen, ensuring it is responsive and does not overlap with any text

I've been working on trying to position an image between two divs on my webpage. So far, I've managed to place the image there but it's not responsive (only displays correctly at a width of 1920) and ends up overlapping the text in both divs ...

What is the process for aligning rows with the selected option from the drop-down menu

Alright, so here's the scenario: I have created a table along with two drop-down filters. The first filter is for selecting the Year, and it offers options like "All", "2023", "2022", and "2021". When I pick a specific year, let's say "2022", onl ...

What could be causing my grid to malfunction once the media query is triggered?

I am in the process of creating a straightforward navigation bar. My goal is to have the <nav> content, which includes the navigation links, positioned inside the header along with the logo (a random image from unsplash.it). To achieve this layout, I ...