Arrange 5 various-sized boxes in a row and use CSS to create a decorative wrapper around them

I'm attempting to arrange 5 boxes in a specific sequence, outlined in the initial diagram. Each box is identical in size except for one that is equal in height to 2 boxes plus the space between them (which seems to be the challenge):

Important aspects to note:

A: Each of the 5 'boxes' is a div element and features a border styled with CSS (which causes complications with padding/margins)

B: Red Circle 1 - Box 3 must align its bottom border precisely with the bottom border of Box 2, even if Image three's height isn't exact

My current HTML setup is as follows:

<div class="hpcategorypagewrapper">
    <div class="hpcategorytopwrapper">
        <div class="hpcategorytopleftwrapper">
            ...

To address Red Circle 2 (Box 3 not extending down to Box 2) and other issues, I attempted to modify the CSS with limited success:

...

The problems encountered include:

In trying to resolve these challenges, I experimented with adjusting image heights and tweaking margins but have yet to find a satisfactory solution. Can you provide guidance on resolving these layout issues without resorting to JavaScript?

Your help would be greatly appreciated, as I am struggling to implement modern web design techniques despite my best efforts.

Answer №1

Are you thinking along these lines? Check out My Fiddle

I have a few additional ideas, but I'd like to confirm if this aligns with your vision.

.block {
    width:48%;
    float:left;
    margin:1%;
    background:#ccc;
}
.wrap-three {
    position:relative;
    width:100%;
    height:auto;
    float:left;
}
.block-one {
    height:46%;
    float:left;
   margin-bottom:3%;
}
.block-two {
    height:46%;
   margin-top:3%;
    position:absolute;
    left:0;
    bottom:0;
}
.block-three {
    height:300px;
}

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

What is the best method for properly inserting images into a Vue Carousel 3D slider?

I'm currently exploring the Vue Carousel 3D documentation and I am having trouble displaying a single image on each slide. Let me elaborate: I aim to create a slider similar to the one shown in the Controls Customized example in the documentation. Th ...

What is the best method for incorporating various HTML checklist items into PHP code?

I am struggling to include multiple checklist values within an if-else statement. Currently, I am only able to insert a single value into the condition even if I select multiple options. Below is my code snippet: <?php $db_host = 'localhost&a ...

Tips for capturing the interaction between a jQuery Dialog and its Parent

Within the parent HTML, there is a call that triggers a JavaScript function. <div class="data"> <form:input title="Building" styleClass="content contractorDisable" maxlength="5" size="6" path="fireImpairForm.bldCode" />&nbsp; <a hre ...

The issue of the hamburger icon appearing as "X" seems to only affect certain mobile phones, while it displays correctly on desktops and most other mobile devices. The problem appears to be specifically

On certain mobile phones, the hamburger icon displays as an "X" instead of three horizontal lines. This issue specifically affects all XIAOMI mobile phones on various browsers, while most other devices and desktops show the correct hamburger icon. The < ...

Using HTML and CSS to create a display-table for laying out a form

Working on a dynamic HTML/CSS layout that simplifies the process by using classes like form, row, cell label, and cell input to control elements (width, alignment, etc.). I decided to utilize display: table along with its child elements table-row and tabl ...

Unable to view uploaded image via HTML forms

Within my models.py file, I have created a Product class that includes various fields such as category, vendor, name, and price. class Product(models.Model): category = models.ForeignKey(Category, related_name='products', on_delete=models.CAS ...

Move a div element as you scroll down the page

I currently have a div that appears when a user scrolls down a page. When clicked, it sends you back to the top of the page. Right now, it simply fades in and out, but I would like it to slide in from the right side of the page. Below is my existing code: ...

prismjs plugin for highlighting code displays code in a horizontal format

If you're looking for a way to showcase source code on your website with highlighted syntax, prismjs.com may be just what you need. It offers a similar style to monokai... However, I've encountered an issue where the plugin displays my code in a ...

Text selection is disabled

During my work on the test website, I encountered an issue. I've included all of my code as I'm unsure where the problem lies. View the jsfiddle here. As shown in the jsfiddle, the top section of text on the website is unselectable. I'm seek ...

converting blob to base64 in javascript

I need assistance with decoding a blob object to a base64 string using JavaScript. Here is the code I am working with: var reader = new FileReader(); reader.addEventListener("loadend", function () { // Accessing contents of blob as a typed array ...

Adjust the HTML size before converting it to a PDF using the jspdf .html() function

Currently, I am exploring the process of resizing an HTML element using the jsPDF method called .html(). I attempted to implement the following code but found that the width parameter did not have any impact on the final output. Since there is no officia ...

Word wrapping CSS in Select list for IE11

While working with ASP.NET, I am faced with the challenge of creating a ListBox where text in each option wraps to the next line if it exceeds the listbox's width, using only CSS. In Chrome, this can be achieved by utilizing the CSS property word-wra ...

The pattern for the input text in HTML was dysfunctional, specifically when trying to input a negative number or a

Currently delving into the world of regex, where I am exploring ways to restrict user input. After testing on regextester.com with the following pattern: The results were not as expected +10 e10 ^([-,0-9.]+) This configuration yielded successful result ...

What is the best way to display time in EJS?

Currently facing an issue with formatting a time retrieved from the database. The value is strictly a time and not associated with any date. I've attempted to use getHours and getMinutes in EJS, but they don't seem to be functioning as expected. ...

Is it possible to save the current state of an execution in JavaScript and pick up where you left off

Is there a way to accomplish this task? I am interested in developing a JavaScript application that has the ability to "pause" and then "resume" execution from a specific point, similar to a checkpoint system. For example: //code.js var abc = 13; checkpoi ...

Excessive screen height causes the CSS box layout to overflow

I am looking to create a screen layout similar to the one shown in this image. It should consist of a row with no overflow and include: A left box that contains: A fixed height header (20px), An aspect square box taking up the remaining height. ...

What is the best way to design a div element to resemble a mobile-friendly product catalog?

Currently, I am developing a website with a mobile catalog feature. My goal is to create a design similar to popular companies such as Best Buy and Target (refer to the image below). While I believe they utilize a div element for this layout, I would lik ...

What is the method for adding an attribute without a value to an HtmlGenericControl in C#

In my C#/ASP.net project, I am creating a new HtmlGenericControl and I need to add an attribute to the control without assigning it a value. This means having no ="" after the attribute name. oHtmlGenericControl = new HtmlGenericControl("MyHtmlTag"); oHtm ...

Align the text field value with the corresponding tooltip content in Vuetify

<v-col class="d-flex align-center"> <v-tooltip bottom> <template v-slot:activator="{ on }"> <v-text-field v-on="on" :value="info.payeeNo" den ...

creating a random integer and seamlessly transmitting it to the header

When a user enters an incorrect email or password in the login form, I redirect them to login.php?Err=284613 using header ('Location: login.php?Err=284613');. Then, I use Javascript to detect this error code on the page with if (window.location.s ...