Using jQueryUi Tabs for Organizing Div Tables

Recently, I implemented a jQuery tab on my website using the following code snippet:

    <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Basic Info</a></li>
  </ul>
  <div id="tabs-1">
    <p>
                <div class="gen_col">
                    <div class="gen_col_1">Username</div>
                    <div class="gen_col_2"><input type="text" name="username" id="username" class="as_input" /></div>

                    <div class="gen_col_1">Password</div>
                    <div class="gen_col_2"><input type="password" name="password" id="password" class="as_input" /></div>

                    <div class="gen_col_0"><input type="submit" name="login" id="login" value="Login &raquo;" class="as_button" /></div>
                </div>


    </p>
  </div>
</div>

The CSS rules for the gen_col classes are specified as follows:

.gen_col {
    width:400px;
}

.gen_col_0 {
    width:400px;
    float:left;
    padding-top:10px;
    font-size:1.5em;
    font-style:italic;
}

.gen_col_1 {
    width:90px;
    float:left;
    padding-top:6px;
    font-weight:bold;

}

.gen_col_2 {
    width:310px;
    float:left;
    padding-top:6px;
}

Upon review, the display output on my website seems incorrect. Is there a way to rectify this issue? (Please note that the content within the tab is not related to login credentials but was added for testing purposes.)

Thank you in advance!

Answer №1

Looks like you may have overlooked adding the clearfix class.
Make sure to include the clearfix class within the .gen_col

<div class="gen_col clearfix">

If you need more information, check out this helpful resource: here. Remember, it's important to clear every floating element in CSS for proper formatting.

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

I have been attempting to implement validation in JQuery, but it doesn't seem to be functioning correctly

Can someone assist me with adding validation in jQuery? I'm stuck and need help solving this problem. $(function(){ $("#btn").click(function(){ var b=prompt("Enter your link"); $("a").attr("href",b); if($("b").v ...

Conflict between Angular's ng-repeat directive and Sass styling

Currently, I am working on a project and encountering an issue that is causing some difficulty: In order to create a navigation bar with equally distributed list elements based on the number of items, I am utilizing ng-repeat for data binding and Sass for ...

Steps for including a header and footer with page numbers in an HTML page without disrupting the rest of the content when printing

When I print a page with a table that spans multiple pages, I want to ensure that my header and footer are included on every page. The code I've tried so far has treated the entire content as one continuous page. How can I achieve this? ...

Determine whether a div that has been generated automatically has been selected by the user

My JSON file contains a list of elements, each creating a container. See the code below: $.getJSON('/data/risks.json', function(data) { var html = ''; $.each(data.risk, function(key, value){ html += '<div class="elementlis ...

Checkbox customization that shifts position when clicked

I seem to be missing something as I can't seem to find a solution for this particular issue. I have implemented custom checkboxes on a list of sentences. Initially, they appear fine, but once you check the first checkbox, it shifts its position. I am ...

There seems to be a problem with how the navbar is being displayed in ResponsiveSlides.js

I am currently using WordPress, but I have come here seeking help with a jQuery/CSS issue. I am utilizing responsiveSlides.js to create a simple slideshow, however, when viewing it here at gallery link, it appears that something is not quite right. STEPS: ...

Drupal 7 FlexSlider - alignment issue with image placement

I am encountering an issue with the Flexslider module on my Drupal 7 website. I have created a simple slider that displays 3 photos. I enabled touch screen functionality for the slider, and everything seems to be working fine except for one problem - all t ...

What is the best way to assign a single class from an array to every list item in a particular sequence?

html <ul class="logoUl"> <li class="orange"></li> <li class="blue"></li> <li class="green"></li> <li class="pink"></li> </ul> SCRIPT if (selectedCategory == 'currentAll&apo ...

What is the best way to alter the background of a div when hovering over an image?

I am looking to achieve a unique effect with my thumbnail image and background. Currently, I have the thumbnail image inside a div with another image serving as the background to frame it. My goal is to change the position of the background image from bott ...

Printing long contents on Chrome's ion-modal-view is not supported on every page

I have tried various solutions found in articles but have not been successful. Here is an example of one such attempt: @media print { .modal { position: absolute; left: 0; top: 0; margin: 0; padding: 0; visibility: visible; / ...

Sliding right is done by activating the Switch Function, while sliding to the left can be achieved by deactivating it with the help

My objective is to create a functionality where flipping the switch button will cause it to slide automatically to the right, revealing a red background div. When switched off, it should return to its original position with a yellow background using Jquery ...

The dropdown menu is extending outside the header in a right-to-left (RTL) direction

I have implemented the jQuery code below to prevent the dropdown from extending beyond the header area. It works perfectly in the normal LTR version. However, I need a solution for the RTL version. How can I achieve this? jQuery $('.primary-menu .dr ...

What is the best way to link the width and height of a div with form fields?

I need to implement a feature where I can create multiple div elements that are draggable and resizable, and have their properties like width, height, etc. linked to corresponding objects in an array. For example, if I create six divs, there should be six ...

What is the best way to include a span within a select option element to display a flag beside each option?

I'm currently working on a dropdown menu that allows users to easily select their preferred language. I'm facing an issue with incorporating flags using https://github.com/lipis/flag-icon-css for each option. Can someone please assist me with thi ...

Transform the entire division into a clickable link, excluding a specific subdivision that should have its own separate link

I need to create a product layout page where products will be displayed with an image, person's name, title, and description. The challenge is that all of these elements should have one common link except for the person's name that needs a separa ...

Using jQuery to validate the existence of a link

Within my pagination div, I have links to the previous page and next page. The link to the previous page is structured as follows: <span id="previous"><a href="www.site.com/page/1" >Previous</a>. However, on the first page, there will be ...

Show or hide a fixed position div using jQuery when clicked

I am new to jQuery and I am trying to create a "full page menu" on my own. However, I am struggling to hide the menu on the second click. I tried using .toggle() but I found out that it has been deprecated. Can someone assist me with this? Thank you so muc ...

Ensure that a specific value is maintained for a property of an element throughout its animation

There are two distinct types of components that I am working with, which I will refer to as .a and .b. It is possible that these components have been assigned certain CSS animations. I do not have the ability to control these keyframes, whether they are a ...

Display an additional div when hovering over form input

I am currently in the process of designing a search bar animation. Specifically, I want the search history to appear when hovering over the search bar. However, I am facing an issue where the code doesn't seem to work when I use .search-bar-input:hove ...

Is it possible to alter preact-material-components to switch to mdc-theme--dark mode, thereby changing the CSS style of all descendant components?

I recently created a preact-cli app and added the following code in Header.js: document.body.classList.add('mdc-theme--dark'); However, when a user tries to switch from the light theme to the dark theme, only the background of the app changes. ...