Dynamic divs to occupy the rest of the available vertical area

I have been experimenting with a new website layout and created a form setup. However, I am facing an issue with the fluidity of the layout. While the items are floating into position, there is a problem where if the item on the right is 400px bigger than the one before it, the next item won't float under the shorter box immediately. Instead, it will float at the end point of the longer box on the left side, causing a large white space that disrupts the overall look of the layout.

For reference, here is the fiddle link: http://jsfiddle.net/xMzb8/

Below is the code snippet:

HTML

<div class="accountBox">
    <div class="AB-innerFull">
        <p class="AB-title">Registration Form 1</p>
        <div class="AB-innerBody" style="height: 200px;"></div>
    </div>

    <div class="AB-innerHalf">
        <p class="AB-title">Registration Form 2</p>
        <div class="AB-innerBody" style="height: 400px;"></div>
    </div>

    <div class="AB-innerHalf">
        <p class="AB-title">Registration Form 3</p>
        <div class="AB-innerBody" style="height: 122px;"></div>
    </div>

    <div class="AB-innerHalf">
        <p class="AB-title">Registration Form 4</p>
        <div class="AB-innerBody" style="height: 560px;"></div>
    </div>

    <div class="AB-innerHalf">
        <p class="AB-title">Registration Form 5</p>
        <div class="AB-innerBody" style="height: 120px;"></div>
    </div>

    <div class="AB-innerHalf">
        <p class="AB-title">Registration Form 6</p>
        <div class="AB-innerBody" style="height: 50px;"></div>
    </div>

    <div class="AB-innerHalf">
        <p class="AB-title">Registration Form 7</p>
        <div class="AB-innerBody" style="height: 230px;"></div>
    </div>
</div>

CSS

* {
    color: RGB(0, 0, 0);
    font-family: Calibri;
    font-size: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body{
    padding: 5px;
}

.accountBox {
    background: RGBA(200, 230, 240, 0.6);
    border: 1px solid RGB(20, 100, 150);
    float: left;
    margin: 10px 29px;
    padding: 5px;
    width: 870px;
}

.AB-innerHalf, .AB-innerFull {
    background: RGB(255, 255, 255);
    border: 1px solid RGB(200, 200, 200);
    box-shadow: 0px 0px 2px RGB(220, 220, 220);
    box-sizing: border-box;
        -moz-box-sizing: border-box;
    float: left;
    margin: 5px;
    padding: 40px 20px 20px;
    position: relative;
}

.AB-innerHalf {
    width: 425px;
}

.AB-innerFull {
    clear: left;
    width: 860px;
}

.AB-innerBody {
    background: RGB(255, 0, 0);
    clear: left;
    float: left;
    width: 100%;
}

.AB-title {
    border-bottom: 2px dotted RGB(20, 100, 150);
    color: RGB(20, 100, 150);
    font-size: 16px;
    font-weight: bold;
    height: 25px;
    left: 0;
    line-height: 25px;
    margin: 5px 10px;
    padding: 0 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
}

Answer №1

It's possible that this solution may help resolve your issues...!?

Answer №2

grant permission: favoring the larger container

  <div class="AB-innerHalf" style="float:right">
    <p class="AB-title">Registration Form 4</p>
    <div class="AB-innerBody" style="height: 560px;"></div>
</div>

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

Several bootstrap dropdown menus - issue with menu not closing when switching between them

Below are the script and style includes that I am using: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script& ...

Using jQuery to position an element above an ID

I'm currently working on a unique portfolio gallery for my website, but I've encountered a problem. What I'm aiming for is to create a gallery that will slide up when a thumbnail is clicked, without loading all images on the page at once. T ...

Guide to creating a versatile navigation bar using Bootstrap and HTML

I am looking to create a navigation menu that can be easily reused across multiple pages on my bootstrap/html website. Instead of duplicating code, I want to implement a solution for creating a reusable navigation menu in bootstrap/html. How can this be ...

Creating a dynamic background image with automatic cropping techniques: How to do it?

I'm currently working on a custom wordpress theme and I've encountered an issue that I need help with. I want to have a wide background image on my homepage with text centered on it, but I also want the height to remain the same as the browser w ...

What might be causing the navigation to malfunction in Firefox?

Could you please help me identify the issue with the navigation on this website? It seems to work correctly on webkit, but not on firefox! Intended vs actual ...

CSS - setting all child elements to the height of the tallest child element

Is there a way to ensure that both fieldsets have the same height as the tallest one? See the code snippet below or visit this link for reference: http://jsfiddle.net/zpcXQ/2/ <div id="parent"> <form> <fieldset id="left"> ...

Clicking on the image "Nav" will load the div into the designated target and set its display to none. The div will

Can someone help me with loading a div into a target from an onclick using image navigation? I also need to hide the inactive divs, ensuring that only the 1st div is initially loaded when the page loads. I've tried searching for a solution but haven&a ...

Is it possible for CSS to prevent the insertion of spaces?

When filling out a form, I am able to insert spaces in inputs but not in the textarea (which is necessary). Interestingly, inserting spaces in the textarea works flawlessly. <form action="/#wpcf7-f519-o1" method="post" class="wpcf7-form" enctype="mu ...

The URL "http://packagist.org/p/provider-3.json" was unable to be retrieved due to a bad request error (HTTP/1.1 400 Bad Request)

Encountering a 400 bad request issue when trying to connect over HTTP, despite the package only being installable via HTTP. Attempting to override in composer.json to force HTTPS as suggested by others for a workaround, but that solution doesn't seem ...

Tips for showing form data upon click without refreshing the webpage

Whenever I input data into the form and click on the calculate button, the result does not appear in the salary slip box at the bottom of the form. However, if I refresh the page and then click on the calculate button, the results are displayed correctly ...

ag-grid allows for selecting multiple rows without the need to press the Control Key

In order to select a maximum of two rows without pressing the Ctrl button, similar to single row selection behavior, we need to ensure that if the user selects more than two rows, the first selected row is automatically deselected and only the latest two ...

The icon cannot be displayed using the <use> tag in HTML

While examining the source code, I stumbled upon the <use></use> tag. <use xlink:href="#icon-ghost"></use> I couldn't find extensive information about this particular tag. Can someone explain what it is and how it is typicall ...

Attempting to extract a parameter from a URL and pass it as an argument to a function for the purpose of locating objects based on

I am trying to retrieve data from a URL http://localhost:3000/share/user=sampleuser to display objects with an author value that matches the one in the URL. However, I encountered an error when attempting to call a function that extracts the value from t ...

The collapsible toggle menu fails to collapse on mobile-sized screens

I've experimented with basic Bootstrap in order to create a toggle menu, but I'm encountering issues. The menu collapses instead of expanding when the screen size is maximized ('m'). Furthermore, clicking on the toggle icon does not cau ...

Seamless movements to the exact midpoint

I am trying to find a method to create a smooth transition when removing the center class from p.title.class, allowing it to smoothly move to its new position. JSfiddle Here is an excerpt of my HTML: <body> <div class="wrapper-top"> ...

Creating an interactive map using Python with Folium, incorporating a draggable legend and clickable items for users to easily zoom into specific locations

Looking to create an interactive map with python folium package. Need icons for locations and a draggable legend that allows for repositioning by mouse drag. Also need ability to click on legend items to zoom into corresponding locations on the map. Can s ...

Has Apache initiated a forced logout process?

Running a LAMP server, I have implemented Apache basic authentication to log in users accessing the server homepage. I am currently seeking a way to enforce user logout, but my attempts with mod_session & mod_auth_form have not been successful. The page ...

Sorry, but we are experiencing difficulties processing your request at the moment. HTTP ERROR 500: We are unable to locate the

My code seems to be functioning correctly when connecting to the database, but I'm encountering an error. Here is the code snippet: <?php include 'header.php'; ?> <!DOCTYPE html> <html> <head> <t ...

:hover doesn't fully implement background color on list items

When I hover over the dropdown items in my navigation menu, I would like the background color to change for the entire list item. Currently, the background color only changes when hovering over the text itself and reverts back to its original color when mo ...

Is it feasible to have fixed headers adopt the width property?

Is there a way to align the widths of table elements while maintaining a fixed header row? If the 'fixed' property is disabled, the width spaces correctly but the header won't stay fixed and will scroll out of the container div. Enabling the ...