CSS division style not being properly implemented across entire form

I currently have an HTML form linked to a CSS file.

Here is the HTML code:

.css-form-group{
    margin-bottom:10px;
    clear:both;
}

.css-form-group label{
    font-weight: bold;
}

.form-input{
    float: right;
}

.form-input:focus{
    background: yellow;
}

/*sizes*/
.css-col-3{
    width:25%;
}

.css-form-submit{
    clear:both;
}

.css-form-submit input[type='submit']{
    float:right;
}

.css-form-pane{
    background: rgb(212,208,200);
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    border: 1px solid #e3e3e3;
    webkit-box-shadow::inset 0 1px 1px rgba(0, 0, 0, 0.05);
          -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

The issue I am encountering is that the form pane does not fully enclose the form elements, causing the buttons to be outside of it. Additionally, setting a specific width, such as 500px, for the form pane does not work as expected despite the inputs and labels fitting within that size. Can someone please help me understand what is causing these issues so I can resolve them effectively?

htmlcss

Answer №1

To properly clear floats, make sure to apply the clear:both css property after all the floated elements, not within them:

 <div class="css-form-submit css-col-3">
                <input type='submit' name= "submit" value="submit" class="css-btn css-btn-submit">
                <input type='submit' name="cancel" value="Cancel" class="css-btn css-btn-submit">
            </div>
 <div style='clear:both'></div>

Therefore, remove the clear:both from the form-submit class and add it after the div.

You can see a working example in this fiddle :

fiddle

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 is the best way to include additional text in a dropdown menu?

I'm trying to add the text "Choose Country" in a drop-down list before the user selects their country. example1 Here is the line of code I used: <option data-hidden="true"> Choose Country </option> However, the phrase does ...

javascripthtmlangularbootstrap-5

Alter the border line's color based on the specific section or div it overlays

I am attempting to utilize jQuery in order to change the color of my border line depending on its position within the divs. I have set the position to absolute and it is positioned on both divs. My goal is to make the line on the top div appear as grey, wh ...

javascripthtmljquerycss

Provide a spider with unadulterated HTML rather than setting off AJAX requests

While my website is being crawled, which PHP function should I utilize to ensure that even if ajax isn't activated, my content still gets transmitted? PHP doesn't have the ability to determine if ajax is supported. Objective: Provide the crawle ...

htmlajaxweb-crawler

Retrieve the child DIV element within its sibling without using an identifier

I have a setup similar to the following: <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Tiger128 (v2)</h3> </div> <div class="panel-body"> <inp ...

javascriptjqueryhtml

Chrome's Tab key causing unremovable black border [2022]

Is there a way to change the color of the black box shadow to a different hue when switching between nav tabs using the Tab key? Here is the code snippet: <ul class="nav nav-tabs m-5"> <li class="nav-item"> <a clas ...

cssfrontendbootstrap-5

Enhance the clarity of content within an IFrame by sharpening the focus on

I recently developed an iframe to open a chat site I built using React.js and Tailwind. The iframe is loaded dynamically on the website through javascript. However, I noticed that when I click on the input field inside the iframe, the content appears blurr ...

javascripthtmlreactjsiframewidget

How to create a stylish border line to separate rows using CSS

Having some trouble with HTML code... <table class="table table-condensed order-statistics"> <tr class="order-statistics-row"> <div class="row"> <div class="col-lg-4"> Order ID: </div> <div ...

htmlcss

Discovering the amount of time a section of a webpage remains in view on a browser

I am looking for a way to track user engagement on my website that contains pages with extensive scrolling and numerous images. Each user who logs in sees a unique selection of images. My goal is to monitor how long users linger on each part of the page t ...

javascripthtmlweb-analyticsuser-trackingwebsite-metrics

Interactive jQuery tabbed interface with drop-down selectors, inconsistent display of drop-down options when switching between tabs

After receiving assistance from members oka and Mike Robinson, I have successfully created two tables for users to interact with using tabs and dropdowns. Both tables have the same structure and feature a dropdown menu to show/hide columns. Users can sele ...

javascriptjquerycssdrop-down-menu

Exploring Hover Effects in Reactjs and Material UI

I've been working with reactjs and material ui, but I'm having trouble changing the background color of selected items in various components, like in the SelectField. <SelectField floatingLabelText="Choose a sport" value={this.state.val ...

cssreactjsmaterial-ui

What strategies can I use to divide lengthy words in my Django application?

My username on the site is causing overflow outside of the content box, as shown here I tried adding h1, h2, h3, h4, h5, h6 { color: #44444; overflow-wrap: break-word;}, but it didn't work. Here is the code for the profile page: All CSS styles for ...

htmlcssdjango

Tips for adjusting the position of an icon when encountering a line break using Javascript or CSS

After some trial and error, I managed to get it working, but only when the page is initially loaded and not in a responsive manner. Below is the JavaScript code I used. if ( $(".alert-box").height() >= 90 ) { $('.img').css(&apos ...

javascriptjqueryhtmlcssjquery-plugins

Reposition the button alongside the textarea

Seems like this is a common inquiry. I am still learning the ropes when it comes to CSS and JavaScript. I have a textarea with a button beneath it, and I would like the button to stay aligned with the textarea as I resize it! Any suggestions on how I cou ...

htmlcsstextarea

The content within a select tag is experiencing vertical misalignment

The select tag on my page is behaving oddly - when there is a value in it, it is aligned to the bottom vertically. Upon inspecting the CSS, I noticed that the only styles applied are font size and type. Strangely, removing the doctype from the page resol ...

htmlcsshtml-select

Using jQuery to compare input with the current select optgroup choices

I'm struggling with looping through options within a form select. The options are grouped into optgroups, and I believe this is where my issue lies as I can't seem to find the correct syntax. My objective is to compare the value entered using .v ...

jqueryhtmlcsstwitter-bootstrapjquery-mobile

Issue with font-size changes using css variables in Angular not updating in browser for specific fields

Utilizing CSS variables, I have implemented a feature that allows users to adjust the font size to small, medium, or large. While this functionality works correctly for most fields, there are certain instances where the value is applied but not displayed. ...

htmlcssangulartypescriptcss-variables

incorrect <div> <img src="<?php under construction?"

When I try to display images using the construction <div> <img src="<?php..., the images appear as intended. However, there are extra strings leftover from my code after each image. An excerpt of the problematic code: First, I retrieve ...

phphtml

What is the best method for starting a string using the symbol '~'?

Hello everyone! I have a task that requires me to add a special feature. The user needs to enter something in a field, and if it starts with the tilde (~), all subsequent entries should be enclosed in a frame within the same field or displayed in a list ...

javascripthtmlcssstroke

Navigating events within the Material Design Light (MDL) mdl-menu component can be

I am utilizing Material Design Light with just PHP, jQuery, and MDL min CSS and JS, no other frameworks involved. Keeping it simple with a basic menu. <button id="lang-switcher" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> ...

phpjqueryhtmlmaterial-design-lite

What is the best way to retrieve the current value of an *ngFor loop upon button click?

I have been attempting to retrieve the data.login value of the data item that the user has clicked on the avatar image. Despite my efforts, I have not been able to successfully achieve this through various methods found online. How can I access the current ...

htmlnode.jsangularngfor