When the content in one box exceeds the content in the other, one box is considered to be overfilled

For the image, click here:

I am facing an issue with boxes stacking on top of each other. When one box has more content, it overlaps the other.

CSS:

    #destaques_container{
    margin: 0 auto;
}

#destaques_container_dentro{
    float: left;
    margin-left: 25px;
    margin-bottom: 35px;
    display: inline;
    min-height: 190px; 
    font-family: 'Signika', Arial, Verdana;
    font-size:16px;
}
.box_shadow_preview{ 
    position: absolute;
    display: inline-block;
    min-height: 190px; 
    background-color: #FFFFFF; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #DDDDDD; 
    border-radius: 0px; 
-webkit-box-shadow: 2px 2px 16px 0px rgba(52, 84, 109, 0.65);
-moz-box-shadow:    2px 2px 16px 0px rgba(52, 84, 109, 0.65);
box-shadow:         2px 2px 16px 0px rgba(52, 84, 109, 0.65);
-webkit-border-radius: 99px 20px 0px 20px;-moz-border-radius: 99px 20px 0px 20px;border-radius: 99px 20px 0px 20px;
} 
#destaques_line{
    width: 100%;
    display: block;
    clear: both;
}

@media screen and (max-width: 1024px) {
    #destaques_container{
        width: 1002px;
    }
#destaques_container_dentro{
    width: 46%;
    font-size:16px;
}

.box_shadow_preview{ 
    width: 46%;
} 

}

DIV HTML:

<div id="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div id="destaques_line">
            <br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
    </div> 
</div>
<div id="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div id="destaques_line">
            <br /><br /><br /><br /><br />
        </div>
    </div> 
</div>
<div id="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div id="destaques_line">
            <br /><br /><br /><br /><br />
        </div>
    </div> 
</div>
<div id="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div id="destaques_line">
            <br /><br /><br /><br /><br />
        </div>
    </div> 
</div>

Can someone provide tips on how to adjust the spacing between boxes when one box has a greater height than the others, reaching the maximum height of 190px?

htmlcss

Answer №1

It can be more convenient to let the browser handle the placement of elements, but when things are floating within the browser window space, it may be necessary to provide some absolute definitions to assist in determining the optimal layout.

Based on your CSS, it appears that you are aiming for responsiveness to window size, so specifying heights and widths of objects will prove beneficial.

You currently have a combination of floated items, absolute positioning, various display types, and multiple items sharing the same id. This mix can result in unpredictable behavior within the browser.

In the code below, I have converted the id attributes to class attributes, removed display and position declarations, ensured consistent heights and widths for all boxes, and made them scrollable.

HTML:

<!DOCTYPE html>
<HTML>
<HEAD>
<link href='testing.css' rel="stylesheet" type='text/css'>
</head>
<body>
<div id="destaques_container">
<div class="destaques_container_dentro">
    <div class="box_shadow_preview">
        <!--Adding div to use as header. Inline styling just to make it more obvious -->
        <div style="width:100%;height:99px;text-align:center;background-color:#ff0;opacity:0.3;">box header</div>
        <!--This div has a unique id.  It has different css. -->
        <div id="destaques_line_1">
             box 1<br /><br /><br />scrollable div with a div above for a header<br />yellow background added to highlight it<br /><br /><br /><br /><br />
        </div>
    </div> 
</div>
<div class="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div class="destaques_line">
             box 2<br />      <br />       <br />  <br />      <br />
        </div>
    </div> 
</div>
<div class="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div class="destaques_line">
             box 3<br /><br /><br /><br />scrollable div with left padding<br /><br /><br /><br /><br /><br />box 3<br /><br /><br /><br /><br /><br />box 3<br />
        </div>
    </div> 
</div>
<div class="destaques_container_dentro">
    <div class="box_shadow_preview">
        <div class="destaques_line">
             box 4<br /><br /><br />     <br /><br />
        </div>
    </div> 
</div>
</div>
</body>

CSS:

#destaques_container{
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
.destaques_container_dentro{
    float: left;
    margin-left: 25px;
    margin-bottom: 35px;
    /*display: inline;*/
    min-height: 190px; 
    font-family: 'Signika', Arial, Verdana;
    font-size:16px;
    width: 46%;
}
.box_shadow_preview{ 
    /*position: absolute;
    display: block;*/
  width:100%;
    min-height: 190px; 
    background-color: #FFFFFF; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #DDDDDD; 
    border-radius: 0px; 
-webkit-box-shadow: 2px 2px 16px 0px rgba(52, 84, 109, 0.65);
-moz-box-shadow:    2px 2px 16px 0px rgba(52, 84, 109, 0.65);
box-shadow:         2px 2px 16px 0px rgba(52, 84, 109, 0.65);
-webkit-border-radius: 99px 20px 0px 20px;-moz-border-radius: 99px 20px 0px 20px;border-radius: 99px 20px 0px 20px;
}

.destaques_line{
    width: 100%;
    height: 190px;
    padding-left:99px;
    overflow-y: scroll;
    /*display: block;
    clear: both;*/
}enter code here

The outcome is as follows:

Due to the prominent rounded corner on the top left of each box, scrolling text might extend beyond the borders. Therefore, I have proposed a couple of options for consideration:

  1. Add a div above the scroll-able content to act as a header or showcase content that should always be visible.
  2. Utilize left padding to create space between the contents and the rounded corner.

Answer №2

Eliminate the styling of 

position: absolute; display: inline-block;
from within .box_shadow_preview{.

Delete 

.box_shadow_preview{ width: 46%; }
as well.

This adjustment will resolve the overlapping problem, but it may cause alignment issues. Consider implementing an equal height script to ensure uniform height for the blocks.

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

Using a 90% zoom level in the browser does not trigger any media queries

When addressing the width of a specific class, I utilized CSS media queries as shown below: @media (max-width:1920px) { .slides { width: 860px; } } @media (max-width:1500px) { .slides { width: 852px; } } @media (max-width:1 ...

cssmedia-queries

What is the preferred method of compiling Sass: utilizing the Live Sass Compiler extension in VS Code, or setting up and running Sass through npm? (Including guidance on transitioning from node-sass to dart-sass)

As I delve into an online course focused on Advanced CSS and Sass, I have noticed that the techniques being taught seem a bit outdated. The course heavily relies on node-sass in its dependencies, which is now considered deprecated. An alternative solution ...

cssnode.jsnpmsasslive-sass-compiler

Incorporating random images into diverse div containers every time

I previously asked this question, but it was too long and not specific enough. So here is a revised version of my query. For fun, I am creating a game based on instructions I found online. The game involves 12 cards with images face down. You click on two ...

jqueryhtml

Leveraging configuration files for HTML pages without any server-side code

I am currently working on developing an app using phonegap. At the moment, I have the reference to a script in every page like this: <script language="javascript" src="http://someServer/js/myscript.js"></script> If the server 'someServer ...

javascripthtmlcordova

Ways to display a specific section on an HTML page using AngularJS

Main page content <div class="row"> <div class="col-md-3"> link 1 link 2 link 3 . . . </div> </div> <div class="col-md-9"> <div ng-view></div> </div& ...

javascripthtmlcssangularjs

Exploring Attachments in ASP.NET Core MVC Views

I have placed attachments in a Shared Folder on a server. I attempted to access them using the <a> tag <a href="file:///C:">Open Attachments</a> Unfortunately, this method did not work in ASP.NET Core MVC for unknown reasons. I ...

javascripthtmlasp.net-core

Unable to retrieve angular HTML content from my standard HTML website

I have a basic HTML website and I am looking to redirect to an Angular website upon clicking a button on the HTML site. Both the HTML website and Angular build are hosted on the same server, Hostinger. The button in question is here: This is the simple HT ...

htmlangularangular-material

Instructions for inserting <tr></tr> after every fourth iteration of <td></td> in the loop

I am trying to create a list of twenty people with each tr containing 4 people, and I want to break from the loop after every fourth number. Each td value should be incremented in order. This is the code snippet I have been working on: <?php for ($i ...

javascriptphpjqueryhtmlfor-loop

Tips to detect a specific animation completion on an element?

How can I ensure that a specific animation ends when multiple animations are triggered on an element? My scenario involves an overlay song list that appears when a list icon is clicked. The challenge lies in closing the menu smoothly. I have implemented a ...

javascriptjqueryhtmlcss

Having trouble with individuals gaining access to my gh-pages on Github

After creating a gh-pages repository on Github to showcase my portfolio, I encountered an issue where visitors were being prompted to log into Github in order to view the page. Gh-pages are intended to be public, so I am unsure why this is occurring. My ...

htmlcssgithostinggithub-pages

An HTML document may display a segment of a URL

Is there a way to display part of a URL in an HTML document, so that if the URL changes, the corresponding content in the body also updates? For instance, www.example.com/?key=i - Is it possible for this link to be dynamically displayed within the body o ...

javascripthtml

Addressing Layout Problems When I Enlarge the Browser Width

My website is www.adventureswithross.com When the device width is larger than 601px, I have specific requirements: I need the menu and custom header to be seamlessly connected without any spacing in between. To address the issue of space above the custo ...

phphtmlcsswordpress

What is the recommended approach for linking CSS files when utilizing ASP.NET URL routing?

Within my URL routing setup, I have a master page content template that references a stylesheet on the destination page: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> <link href="css/actionmenu.css" rel="stylesheet" t ...

asp.netcssurl-routing

Don't forget to retain the checkboxes that were chosen in the

I am looking for a solution to a specific scenario. When I open a modal box and check some checkboxes, I want those same checkboxes to be selected the next time I open it. Below is an example of my code. Main Controller modal function function openModa ...

javascripthtmlangularjscheckboxmodal-dialog

Creating a responsive design for embedding YouTube videos in web pages

I am facing an issue with embedding YouTube videos on my webpage. I have tried to make the videos responsive by using the code provided below, which works well on mobile and tablets. However, on desktops and laptops, the videos appear very large. As a work ...

htmlcsstwitter-bootstrapiframebootstrap-5

Unlocking secure content with Ajax

Trying to access a webservice or webpage solely through ajax, as it is the only allowed method for some reason. The webservice is secured with corporate SSO. When requesting webpage X for the first time, you are redirected to login page Y, outside of the a ...

javascripthtmlajax

The modal appears on the screen prior to the content being shown

While attempting to render a bootstrap modal with content from a REST call, I am encountering an issue where the modal appears before the content has finished populating. The modal is triggered by a button click event. If I click the button again after wa ...

javascripthtmlangularjstwitter-bootstrap

Ways to customize the appearance of the Next/Prev Button in Griddle

Here is the scenario that has been implemented: nextClassName={'text-hide'} nextText={''} nextIconComponent={ <RaisedButton label='Next' />} As a result, a Next Button with a wrapper div above the but ...

cssreactjsmaterial-uigriddle

Getting real-time comments after they have been submitted in ReactJS

Is it possible to dynamically display newly added comments in real-time without refreshing the page after submitting them to the database through an API? Here's a snippet of the code I currently have: const PostWidget = ({ post }) => { ...

javascripthtmlreactjs

Guide on transforming Div content to json format with the use of jquery

I am trying to figure out how to call the div id "con" when the export button is clicked in my HTML code. I want it to display JSON data in the console. If anyone has any suggestions or solutions, please help! <html> <div id ="con"> < ...

javascripthtmljqueryjson