What steps can I take to stop my Details element from moving a nearby Div?

Within this setup, there is a div containing Details and Summaries to the left.

Upon expanding the details, the text enlarges and the container moves, causing the image in the right div to shift downward.

Is there a way to prevent this from happening?

If so, how can I effectively prevent it?

Here is the code snippet:

 <div id="left">

         <details>
         <summary>
            lorem
         </summary>
         <p class="general-text">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis totam quos illum. Obcaecati voluptates dicta voluptatibus sunt doloribus rem tempora.
         </p>
         </details>

         <details>
         <summary>
            lorem
         </summary>
         <p class="general-text">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis totam quos illum. Obcaecati voluptates dicta voluptatibus sunt doloribus rem tempora.
         </p>
         </details>

         <details>
         <summary>
            lorem
         </summary>
         <p class="general-text">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis totam quos illum. Obcaecati voluptates dicta voluptatibus sunt doloribus rem tempora.
         </p>
         </details>

         <details>
         <summary>
            lorem
         </summary>
         <p class="general-text">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis totam quos illum. Obcaecati voluptates dicta voluptatibus sunt doloribus rem tempora.
         </p>
         </details>
        

    <div id="right">
         <picture id="image-container">
            <img src="Resources/Images/myImage.jpg" alt="">
         </picture>
    </div>
htmlcss

Answer №1

Kindly include all relevant CSS and HTML in your query. Will this assist?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <style>
    
    #left {
      float:left;
     width: 70%;
    }
    
    #right {
      float:right;
      width: 20%;
      
    }
    
  </style>
</head>
  
<body>
 <div id="left">

         <details>
         <summary>
            lorem
         </summary>
         <p class="general-text">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis totam quos illum. Obcaecati voluptates dicta voluptatibus sunt doloribus rem tempora.
         </p>
         </details>

         <details>
         <summary>
            lorem
         </summary>
         <p class="general-text">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis totam quos illum. Obcaecati voluptates dicta voluptatibus sunt doloribus rem tempora.
         </p>
         </details>

         <details>
         <summary>
            lorem
         </summary>
         <p class="general-text">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis totam quos illum. Obcaecati voluptates dicta voluptatibus sunt doloribus rem tempora.
         </p>
         </details>

         <details>
         <summary>
            lorem
         </summary>
         <p class="general-text">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis totam quos illum. Obcaecati voluptates dicta voluptatibus sunt doloribus rem tempora.
         </p>
         </details>
        
    </div>
    <div id="right">
         <picture id="image-container">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overflow_logo.svg" width="200px" alt="">
         </picture>
    </div>
</body>
</html>

Alternatively, view it here https://jsbin.com/qalimucoki/edit?html,output

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

Ways to implement pointer event styling within a span element

Hi, I'm having trouble with styling and I can't seem to figure out how to resolve it. The style pointer-events: none doesn't seem to be working for me. Here is an example of my code: The style snippet: .noclick { cursor: default; ...

javascripthtmlcssangular

Are there any alternative solutions to the onunload event in Chrome, or any other ways to achieve the

After extensive searching for a solution to this issue, including scouring Google Chrome support sites and the Chrome Bug Issues page where the problem has not yet been resolved. Currently, I find myself in a situation where I need to use the onload or onb ...

javascripthtmlgoogle-chrome

Activate the initial tab in JQuery UI accordion upon initialization

Hello, I have implemented a simple sidenav menu on my website. It consists of parent items and child items structured according to the h3 > div format as suggested by JQuery's documentation. My challenge now is to automatically open the "active" t ...

javascriptjqueryhtmlopencart

Do you require assistance with creating an image slideshow?

My first day working with HTML was a success as I successfully built a navigation bar that looks pretty cool. Take a look at it here. Next on my list is to incorporate a slideshow into my site, possibly using JavaScript or jQuery plugins. I'm aiming ...

javascriptjqueryhtmlcssplugins

Formatting dynamically generated HTML using C#

My ASP.NET web forms site has a large menu that is dynamically generated using C# as a string. The HTML code returned looks something like this: <ul><li><a href='default.aspx?param=1&anotherparam=2'>LINK</a></li> ...

asp.nethtmlformatting

Error: Unable to retrieve the value of a null property | ReactJS |

There are two textboxes and one button designed as material UI components. </p> <TextField id="chatidField" /> <br /> <p> <code>Enter Your Name:</code> <hr /> & ...

javascripthtmlcssreactjsmaterial-ui

Utilizing JavaFX 2 with a touch of CSS styling

Currently, I am practicing JavaFX 2.0 and working on creating an XYChart with 2 line series while also customizing colors, strokes, etc. through a CSS file. In order to guide me through this process, I decided to refer to the following link: http://docs. ...

cssjavafx-2

A table featuring two tbody sections positioned side by side within the table structure, with the thead located at the top

My goal is to design an HTML table layout resembling the following: Left part | Right part | Remove row? ------------------------------------------- 1 [input] [input] Y/N 2 [input] [input] Y/N 3 [input] [inpu ...

htmljquery-uihtml-table

Leveraging JavaScript Fetch() and formData() for Database Updates

As I delve into my JavaScript project, utilizing the fetch() method, I find myself facing a puzzling situation. Despite having a grasp on the basics of fetch and formData, the code in question appears needlessly complex for its intended purpose, leaving me ...

javascripthtmlajaxfetchform-data

Include an additional feature to an already established design

I have been attempting to move an element to the left using the transform property. However, there is already a pre-existing style with transform, which appears as: transform: translate3d(tx, ty, tz) What I am aiming for is to incorporate another property ...

htmlcssleaflettransformngx-leaflet

What is the proper way to select the <ul> element within an FTL template?

Can someone provide guidance on how to target a <ul> container within a freemarker template using JavaScript? My goal is to display the content of this specific <ul> element in my FreeMarker template on the web page. Any suggestions on how I ...

javascriptcssfreemarker

The alternating colors in the sorting table are not visible due to the divs being hidden with the display set

I've come across a problem that has me stumped. So, there are two sorting filters on a table and one of them hides rows that don't apply, messing up the alternating colors. Take a look at the function that sorts and the CSS below. The issue is pr ...

javascriptjqueryhtmlcss

The hover effect in CSS brings life to list items when filled with content

I am attempting to create an animation for an <li> element that gives the illusion of a fill effect moving from left to right when hovered over. This is my current progress: ul { list-style-type: none; } .hoverTest { float: left; margin-right: 1 ...

javascriptjqueryhtmlcss

Assorted dimensions of square grid

Is it feasible to achieve the following using only HTML and CSS? The condition is that since the divs are automatically generated in a list, they should not be nested within another HTML element (such as adding a div for each line is restricted): Here is ...

htmlcss

What is the best way to ensure bootstrap cards' container expands horizontally?

Currently experimenting with Bootstrap 4 cards (view more at ) My goal is to have a container with a card deck inside that stretches horizontally as I add new cards, causing a horizontal scrollbar to appear when needed. By default, when the container wid ...

cssflexboxtwitter-bootstrap-4

When applying the `display:block` and `width:100%` attributes to an HTML table cell, it may

My issue lies in the usage of DISPLAY:BLOCK for the td cells with a class of column. Despite applying it appropriately, the logo and CALL US td cells do not stack vertically when resized to mobile size. While they are supposed to take up 100% width, they ...

htmlcss

How to style the videojs chapter menu with CSS to extend the box to the full length of the line

I am currently working on customizing the videojs CSS for the ChapterButton menu in order to make it expand to accommodate varying line lengths without wrapping. Even though I can set it to a fixed width, I require it to be able to adjust to different line ...

cssvideo.js

Centered perfectly in a bootstrap card

I'm struggling to create a bootstrap card with a logo perfectly centered, but the logo seems fixed at the top. How can I fix this issue? <div class="col-xl-3 col-md-6"> <div class="card mini-stat"> <div class="card-body tex ...

htmlcssbootstrap-4

Energetic flair for Vue animations

I am currently developing a VueJS sidebar component. The objective is to allow the parent to define a width and display a toggle button that smoothly slides the sidebar in and out. Here is an example: <template> <div class="sidebarContainer ...

javascriptcssvue.js

Arranging pictures in both vertical and horizontal alignment (CSS)

I've been attempting various methods to solve this issue, but none have proven successful. My goal is quite simple: align images both horizontally and vertically in a manner that fills empty spaces with photos. Similar to the layout here: The challe ...

htmlcss