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

Challenges arising from the use of 'position: absolute' in managing relationships between grandparents, parents, and children

Achieving a sidebar that remains full height with CSS

Distinguishing Design with CSS3

Transform SVG with a Click

Enhancing website aesthetics through CSS styling

Having difficulty formatting text alignment using CSS

Decrease the amount of empty space when adjusting the window size

Exploring the power of AngularJS through nested directives

In my database, I have two tables: Table1 and Table2. To better illustrate my issue, I have included a picture for reference

Problem with CSS hovering on images when hovering on links?

Is there a way to verify the presence of data returned by an API?

Issues with Flexbox not being rendered correctly on Safari 5.1 for Windows

Applying Bootstrap classes to adjust font weight

Arrange the HTML elements in a line, one following the next

I am looking to implement an animation that automatically scrolls to the bottom of a scrollable DIV when the page is loaded

Tips for indicating errors in fields that have not been "interacted with" when submitting

Monitoring changes in SASS files using node-sass through NPM

Run JavaScript upon the webpage loading without the dependency of jQuery

Having trouble getting the background of the <span> element to function properly

Ensuring consistent width for two divs using CSS