The div elements are not nested correctly as they should be

Essentially, I have a div element that contains a wrapper along with two other nested divs. One of these divs floats to the left while the other floats to the right.

You can see how it appears here:

Upon examining the code provided below, you'll notice that both .register-form and .login-form are enclosed within #info, however they do not display as intended for some reason.

Here is the code snippet: http://jsfiddle.net/x8KaA/ (please note that the code has been placed in a jsFiddle due to its length, and the appearance in the result box does not accurately reflect the actual layout)

Thank you very much.

csshtml

Answer №1

By floating elements, you can prevent them from impacting the dimensions of their parent element. To ensure that the elements are contained, you can employ the overflow property. Simply setting overflow without specifying a height for the element will result in it containing its child elements:

#info { overflow: hidden; }

Answer №2

This particular problem is widely recognized and can be resolved universally with the help of clearfix:

Learn more about css clearfix here

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

Manipulate only the elements inside the designated container

My CSS/bootstrap file is quite extensive and the styles are affecting more than just the elements I intended to target. While I want it to have a broad impact, the CSS changes are impacting the entire page. Renaming every element to [name].slider is not ...

htmlcssbootstrap-4

Comparing Products: Enhance Your Selection with Jquery to Add or Remove Items

I am looking to incorporate a "product compare feature" into the product list on my website. I am curious about how I can create a Query String URL from the product list page using jQuery, like the example below. The generated compare URL should follow th ...

javascriptjqueryhtml

Setting the size of a box using CSS in HTML pages

I am facing issues with resizing boxes. Below is the code snippet: <!DOCTYPE html> <html lang="en"> <head> <style> .wrapper { text-align: center; } #bubble { display: inline; -moz ...

htmlcss

Is it possible to merge data from two different models into a single table in Django?

I am currently facing a challenge in consolidating data from two models into a single table, with connectivity established through a Foreign Key. Despite my thorough search of the forum, I have yet to come across a solution that aligns with my specific dat ...

htmldjangodjango-modelshtml-tabledatatables

Creating a split background with dual hues in a VUE project

I'm new to learning VUE and I'm trying to create a page where two different colors connect on the left and right with the same height. However, I'm running into issues where the colors don't align unless I add content to the right side. ...

cssvue.jsvuejs2

CSS rule for targeting an element that does not have any child elements

I have a variety of different elements that are structured similarly to the following.. <div id="hi"> <div class="head"> </div> <div class="footer"> </div> </div> ..however, some of these elements do no ...

csscss-selectors

Mastering AngularJS - Field Population with Blinking Placeholders

I understand that AngularJS fills in fields through their model. HTML is loaded first: <input type="text" data-ng-model="data.myValue" placeholder="example"> The JavaScript code comes next: $scope.data = {}; $scope.data.myValue = 'hello my v ...

htmlangularjs

Symfony 2 lacks the ability to automatically create the web/bundle/framework structure

I encountered a major issue with Symfony. After installing Symfony 2.7.5 via the command line: $ symfony new my_project The problem arose in the generated project directory: /web/bundle In this folder, I found two empty files (not directories!) named fr ...

phpcsssymfony

Events related to key press timing in HTML 5 canvas

Currently, I am developing a game similar to Stick Hero for Android using HTML5. I am working on the code that will capture the time of key press (specifically the right arrow key with ASCII 39) in JavaScript and expand a stick accordingly. <!doctype h ...

javascriptjqueryhtmlcanvasjquery-events

HTML5 Advanced API Integration with Vimeo

After setting up my Vimeo account and app for video upload, I received approval. However, when I attempted to upload a video to the Vimeo server, I encountered difficulties. I am struggling to understand how OAuth functions. Please see below for the co ...

jqueryajaxhtmlapivimeo

What is the best way to ensure a dropdown in an input group occupies the full width?

One of the challenges I'm facing involves a row with 2 columns - the first column contains a title and the second column features an input group. Within the input group, there is an icon and a dropdown menu. Unfortunately, the dropdown menu is not oc ...

htmlcsstwitter-bootstrapbootstrap-4

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

While creating a form inside a dialog box, I encountered an issue with the date picker functionality. Whenever I try to select a date, it disappears and breaks, rendering the last days of the calendar inaccessible. You can view an example of this problem i ...

javascripthtmlcssreactjsmaterial-ui

Encountered a problem when attempting to access an element on a PHP page using

My javascript code is supposed to retrieve information from a specific URL (song.php) which contains the name of a song. However, there seems to be an issue as the javascript is not extracting the required data. Below is the HTML element and javascript fo ...

javascriptphpjqueryhtml

Quiz application utilizing MySQL and JSP technology

I've been developing a Web Application using JSP to host MCQ quizzes. The questions are stored in a MySql Database table called 'qna', with each question having 10 choices. My goal is to design the quiz so that each question appears on a new ...

htmlmysqljsp

Even though my performance in a sandbox environment is excellent, I am unable to obtain a token in a production environment

After posting my question on the Evernote developer forum, I was disappointed to find that the forum had been closed before I received a response. Even after receiving a proposal from an Evernote employee named chanatx to verify if my key was activated co ...

javascripthtmloauthevernotemonaca

Tips for positioning an image in the TOP Right corner below the navbar using CSS

I am currently in the process of learning HTML and CSS, and I would like to practice and conduct research whenever I encounter difficulties. Recently, I have been attempting to style my landing page based on a screenshot that I took. However, I have been u ...

htmlcss

What causes two identical pages to display fonts in different ways?

Two identical pages, hosted on the same server with the exact same Apache configuration and home directory. Each page contains only one sentence of text, unstyled. The strange thing is, when viewed in Chrome and Safari, the fonts render differently, while ...

css

The animation is not updating quickly enough

I'm working on a navigation bar that sticks to the top of the page. As the user scrolls down, I want the bar to shrink, and when they scroll back up, it should return to its original size. Issue: The problem I'm facing is that when the user quic ...

javascriptjqueryhtmlcss

How can I specify a CSS class pair within a CSS module in React?

<NavLink to={rootPath + path} activeClassName="active" className={scss.navlink} > <ListItem button key={name}> <ListItemIcon> <Icon htmlColor="#E1F ...

cssreactjsreact-css-modules

Utilizing the p tag to incorporate dynamic data in a single line

I am currently working with two JSON files named contacts and workers. Using the workerId present in the contacts JSON, I have implemented a loop to display workers associated with each contact. The current display looks like this: https://i.sstatic.net/AR ...

cssangular