The placement of the floating element completely messes up the

Question

The placement of the floating element completely messes up the

Whenever I try to float an element in my magnificent popup, the layout gets all messed up.

You can see for yourself by trying to put the image and text next to each other using "float: left":

Every time I attempt to float the image and text, the white background shrinks. What could be causing this issue? It seems to occur whenever I use "float:left".

Here is a snippet of my HTML code:

<div id="modal_profile_organisor" class="white_modal mfp-hide">

                    <div class="modal_padding">

                            <h3>Organisor</h3>

                            <div class="modal_organisor_details">

                                <img src="http://placehold.it/100x100">
                                <p>Some small text</p>



                            </div>


                    </div> <!-- /.modal_padding -->

                </div> <!-- /#modal_profile_organisor -->

<a href="#modal_profile_organisor" id="popup_organisor_modal">open modal</a>

html css

Answer 1

Answer №1

In order to manage floats effectively, it is important to clear them at the point where you no longer want elements to float. This can be done by adding a clear: both; property.

A helpful demonstration can be found in this fiddle

The clearfix class used by HTML5 BOILERPLATE is provided below:

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

To apply the clearfix class to the container holding floating elements, simply add it to the wrapping element.

Answer 2

In order to manage floats effectively, it is important to clear them at the point where you no longer want elements to float. This can be done by adding a clear: both; property.

A helpful demonstration can be found in this fiddle

The clearfix class used by HTML5 BOILERPLATE is provided below:

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

To apply the clearfix class to the container holding floating elements, simply add it to the wrapping element.

Answer 3

Answer №2

By floating all the elements within the .modal_organisor_details div, it causes the container to have no size. To fix this issue, you can add overflow: auto to the container which creates a new float context:

.modal_organisor_details {
  text-align: center;
  font-size: 1.6em;
  margin-top: 10px;
  overflow: auto;
}

.modal_organisor_details img, .modal_organisor_details p
{
  float: left;
}

See an example here: http://jsfiddle.net/a7Vj8/2/

Answer 4

By floating all the elements within the .modal_organisor_details div, it causes the container to have no size. To fix this issue, you can add overflow: auto to the container which creates a new float context:

.modal_organisor_details {
  text-align: center;
  font-size: 1.6em;
  margin-top: 10px;
  overflow: auto;
}

.modal_organisor_details img, .modal_organisor_details p
{
  float: left;
}

See an example here: http://jsfiddle.net/a7Vj8/2/

The placement of the floating element completely messes up the

Answer №1

Answer №2

Similar questions

What steps can be taken to restrict a user's access to the main page unless they are logged in?

How to Properly Adjust the Material UI CircularProgress Size

Retrieving Table Characteristics from an Online Source

Develop a DIV element that remains constant throughout different web pages without having to reload

Facing a blank page with no errors displayed during the HTML rendering process in Angular version 6

Angular and JS do not have the functionality to toggle the split button

Clone the children of an li element using jQuery, modify the text within a child tag, and then add it to

The event listener function is not functioning properly on images generated by JavaScript

Programmatically adjusting the color of mask images - Creative image theming

Struggling to keep my image buttons aligned in a horizontal line at the center, but they keep stacking vertically instead

What is the reason for incorporating the footer within the container?

You can submit a photo to a form as an attached file

In this guide, learn the best way to dynamically adjust image height to match the height of any device

What is the best method for extracting one specific data point from a database table?

Steps to insert a Drop-Down Sub-Menu

The email validation function is not functioning correctly when used in conjunction with the form submission

Change the content of a selectbox dynamically with the help of jQuery and AJAX

The following divs are adjacent to each other, with their widths set in percentages, and the paddings

Center a sans-serif font vertically with exact precision while adjusting the font size

Investigate the presence of a vertical scrollbar using JQuery or JavaScript