Issues Arising with Parent Container When Child Elements are Floating

Here is a question related to a previous query I made on Stack Overflow.

I am currently facing an issue with two horizontally aligned divs within a parent div named ".Parent". The structure of the layout is as follows:


<div class="Parent">
    <div style="float:right">
        <span>source list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>

    <div style="float:left">
        <span>dest list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>

    <div style="clear:both; font-size:1px;"></div>

</div>

The problem arises from the fact that the Parent div is nested inside another div called #main. This #main div has a white background that outlines all content.

Prior to adding floats to the divs within .Parent, everything appeared fine as the containing div adjusted the white background accordingly. However, now that the divs are floated, they no longer expand #main's white background.

If anyone has suggestions on how to make #main recognize its proper dimensions and adjust accordingly or if there is a different approach I should consider, I would greatly appreciate it.

Thank you,

Dave

Answer №1

To properly style your #main element, consider adding overflow:hidden; and optionally including clear:both;

Answer №2

Indeed, their behavior is actually correct as parent divs should not expand to contain floated elements. Other responses have also demonstrated this concept, and you can search for "clear floats" on Google for further explanations and practical examples.

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

Building a nested table within a parent table in bootstrap is a breeze

Can you provide guidance on nesting tables in Bootstrap-3? Whenever I attempt it, the second table ends up being displayed after the first one. ...

Validating Data in Laravel with a Single Rule

I just started working with Laravel and our system has multiple forms on one page to enter a single bitcoin wallet in each input field. Currently, users can enter the same wallet information in all inputs, but this is not correct. Is there a way to only al ...

Resolving Problems with Ion-Split-pane in the Latest Versions of Angular and Ionic

There seems to be a perplexing issue with the ion-split-pane element that I just can't wrap my head around. Once I remove the split-pane element, the router-outlet functions perfectly fine. The navigation is displayed after a successful login. The on ...

Fade between two divs using jQuery works perfectly with images, but unfortunately, it does not work with iframes

Edit: Uploaded live, with images, and with iframes I am experimenting with making pane1 fade into pane2. It successfully works with images, but I am curious if it can be achieved with iframes. Is this feasible? Any insights or suggestions are much appreci ...

Making ASP.NET textbox wider to fit entire row using bootstrap css

This is my first time working with ASP.NET and I must admit, my HTML skills are still pretty basic. Currently, I am using the Bootstrap grid system to create a form that follows this structure: <div class="container"> <div class=" ...

Embed an external JavaScript file into a primary file

Is it possible to include the coding from an external javascript file directly into the same file, similar to how we can put CSS inside a style tag? popwindow = window.open(src, name, 'height=500, width=500'); ...

Material design for Angular applications - Angular Material is

Recently, I decided to explore the world of Angular and its accompanying libraries - angular-material, angular-aria, and angular-animate. I'm eager to experiment with this new styling technique, but it seems like I've hit a roadblock right at the ...

Automated Heading Organization with jQuery: Easy Numbering from H1 to H6

After going through various related posts without finding a solution for IE, I am reaching out for help with a jQuery-based approach to address this issue: My content includes nested hierarchical Headings in the following structure: <h1> heading 1& ...

Is it possible for a div or any other element to apply "margin:auto" while allowing padding only for the text inside it, rather than specifying a fixed size or percentage?

When creating a new div and adding text to it, there are a few considerations. <div style="margin:auto;background-color:yellow;padding:10px;">text</div> Instead of the default 100% width, we can add padding around the text "text". To achieve ...

Height-based responsive navigation bar

I recently implemented a menu on my responsive website that appears when the viewport is 714px width or less. Upon clicking the button, a side-sliding menu emerges across the page. However, I'm facing an issue with setting the menu height to match th ...

What could be the reason for my onChange event not functioning properly?

The issue I'm experiencing involves my onchange event not properly copying the text from the current span to the hidden field. Any ideas on why this might be happening? Check out my code at this link. ...

Instantly appearing and disappearing Bootstrap modal popup catches users off guard

I've encountered an issue with my bootstrap popup that displays student results - it opens and closes immediately. In my master page file, I have included the following JS files: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser ...

Is it possible for me to input text into html while the page is loading?

Is there a way to preload external files while a web page is loading? I'm looking to incorporate a JavaScript templating engine into my website and prefer to store my templates in separate files. Instead of loading these templates asynchronously, I&ap ...

Is it possible for me to generate values using PHP that can be easily read by JavaScript?

I'm currently building a website and I am facing some challenges when trying to incorporate JavaScript for real-time calculations. Here are my issues: Is there a more efficient way to avoid manually typing out the code for each level up to 90, lik ...

Uniform height for flex columns

Currently tackling the challenge of arranging tournament pairs in a visually appealing tournaments tree view The issue arises when the bracket columns have varying quantities of pairs, resulting in different heights due to the use of flex I aim to achiev ...

Modify the location of the input using jQuery

Hey there, I've got this snippet of HTML code: <div class='moves'> <div class='element'><input type='text' value='55' /></div> <input class='top' type='text&apo ...

Styling a GWT StackPanel for a Unique Look

I'm facing some difficulty with styling a stackpanel in my app. I've tried different methods, but none seem to work as expected. The first method involves applying CSS directly to the stackpanel elements: .gwt-StackPanel .gwt-StackPanelItem { ...

The $ionicPopup is not displaying at the bottom of the screen as expected

I'm a beginner in Ionic framework and AngularJS. I'm currently using the Confirm style Ionic popup, but for some reason the buttons aren't appearing at the bottom of the popup. Check out my updated codepen here: [http://codepen.io/skpatel/ ...

How to eliminate a line break following an image tag in HTML

Before I display my image with an H3 tag, I didn't use any break statements. However, the two tags are appearing on separate lines when I view it in the browser. Is there a CSS trick I can use to solve this issue, or perhaps an easier tag attribute th ...

Angular silhouette casting on CSS fold

I am attempting to recreate this design as accurately as possible, but I am struggling with replicating the shadow effect on the right side. Is it achievable using CSS? CSS: *{margin:0px;padding:0px;} html { width:100%; height:100%; te ...