An additional div block positioned on top of another

I am attempting to create a compact gallery grid with three distinct elements as shown below:

-----------------------      -----------------------
-                     -      -                     -
-                     -      -                     -
-                     -      -       element 2     -
-     element 1       -      -                     -
-                     -      -                     -
-                     -      -----------------------
-                     -      -----------------------
-                     -      -                     -
-                     -      -                     -  
-                     -      -    element3         -   
-                     -      -                     -
-                     -      -                     -
-                     -      -                     -
- - - - - - - - - - - -      -----------------------

All of these elements are part of a CSS class called .gallery, with element 2 and element 3 falling under the CSS class named .small.

I initially tried coding this on my own, but I intend to implement it on a mobile site. While my current code is functional, resizing the browser window causes elements 2 and 3 to float left.

CSS:

.gallery li{
  background: #ccc;
  width:100px;
  height: 100px;
  margin: 1%;
  list-style: none;
  float: left;
}

.gallery .big{
  height: 205px;
  width:48%;
}

.gallery .small{
  height:100px;
  width: 48%;
}

HTML:

<div class="gallery">
  <li class="big"></li>
  <li class="small"></li>
  <li class="small"></li>
</div>

I appreciate any assistance you can provide!

htmlcss

Answer №1

By adjusting the CSS code as shown below, the issue can be resolved.

.gallery li{ 
    background: #ccc;
    width:100px;
    height: 100px;
    margin: 1%;
    list-style: none;
}

.gallery .big {
    height: 205px;
    width:48%;
    float: left;
}

.gallery .small{
    height:100px;
    width: 48%;
    float: right;
}

Answer №2

After some tweaking, I believe I've made the necessary adjustments you were looking for. By simply adjusting the margins, things look much better now. Feel free to experiment with it further. My suggestion would be to not only resize the width based on the viewport but also maintain a proportional height that suits your taste.

Here is the HTML code:

<div class="gallery">
  <li class="big"></li>
  <li class="small"></li>
  <li class="small"></li>
</div>

And here is the CSS code:

.gallery li {
    background: #ccc;
    width:100px;
    height: 100px;
    margin: 1%;
    list-style: none;
    float: left;
}

.gallery .big {
    height: 220px;
    width:48%;
    margin-right: 3px;
    margin-top: 10px;
    margin-left: 10px;
}

.gallery .small {
    height:100px;
    width: 48%;
    margin: 10px;
}

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

Incorporate a notification into the Windows notification center without it being visibly displayed on the desktop

I am currently developing an Electron application that includes a custom Notification feature. This feature involves html5 divs appearing and disappearing as necessary on a frameless, transparent, always-on-top window. Although the feature works well, I s ...

htmlnode.jsreactjswindowsnotifications

Seeking assistance with printing an HTML template using a printer in Angular 2. Can anyone provide guidance on how

I have a scenario where I need to print an HTML template from within my Angular 2 component. Specifically, I want to be able to click on a print button on the same page and trigger the print function, which would display a print preview and allow the use ...

htmlangulartypes

Which architectural style is best to master for developing exceptional JavaScript software?

My familiarity with Model-View-Controller runs deep, having worked with it for years in server-side development using languages like PHP. Now, I find myself diving into JavaScript and embarking on a large project that utilizes SVG, Canvas, and other moder ...

javascripthtml

The background of the body isn't showing up on the

I'm having trouble setting the background on my page. The background works for another div on the same page, but not on the body background itself. <!DOCTYPE HTML> <html> <head> <title>iDeas.com</title> <link rel=" ...

htmlcss

Exploring ways to incorporate zero padding exclusively for mobile devices through Bootstrap

On mobile sm devices, I am trying to achieve padding: 0, but so far nothing has worked. I referenced this post on Stack Overflow and also attempted the code below: The default padding of 15px on the right and left for col-*-12 is causing issues. I only wa ...

htmlcssbootstrap-4cross-platformpadding

Expanding on the number of touchdowns can be achieved by using HTML and PHP to iterate through array elements

I am searching for a way to dynamically add table rows and cells based on the number of elements in my PHP array. Specifically, I have 4 arrays that are populated with numbers from a text document using a PHP script. This part is working correctly. Now, I ...

phphtmlarrayshtml-table

Override the use of box-shadow

In my design, I apply a box-shadow to all images within a certain section. However, there is one image in that section that should not have a box-shadow. If I assign that image an ID or class to give it higher priority, how can I effectively remove the box ...

htmlcssbox-shadow

Why does the onclick function fail to trigger when placed within the form element?

This form utilizes the react-bootstrap styling library. Strangely, when I place the submit button inside the form tag, it causes the app to break and restart. However, moving the button outside of the form tag resolves the issue. Can someone explain why ...

cssformsbootstrap-4react-bootstrap

Is there a way to prevent a page from redirecting when a checkbox is clicked?

I am currently working on this code snippet: <div onClick="$(location).attr('href','updateUser.php?id=<?php echo $admin->id; ?>')" class="dbItem"> <div class="dbItemCheckbox"> < ...

javascriptjqueryhtmlcheckbox

Ways to align two divs side by side

My goal is to design a webform where users can enter the dates they want to take off from work. I have two div classes that I want to align horizontally and when the "Add Dates" button is clicked, another line should be added. I attempted to place the two ...

htmlcssangular

When you choose the File->Print option, the PDF contents are seamlessly printed within the document

My web page has an embedded PDF file within the content. <h3>Foo</h3> <object id="foo" data="bigboundingbox.pdf" type="application/pdf" classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"> </object> When viewed in Interne ...

htmlinternet-explorerpdfwebprinting

Rendering with Apache Tiles 3.0

Encountering an issue with rendering HTML in Apache Tiles 3.0. I have noticed that when viewing the HTML code below in a browser, the table displays correctly without any space between the first and third td elements. <html> <head> <title& ...

htmlapachespring-mvc

Integrating NodeJS and Pug to Populate Input Values with Database Variables

I've been attempting to display the value of #{product.name} in a textfield, but unfortunately my code hasn't produced the desired outcome. label Name input(type='text', placeholder='Name', name='name' value='# ...

javascripthtmlnode.jspug

Ways to halt a script entirely once its tag has been eliminated

I have a script from a page tracker website that runs periodically. Occasionally I need to restart the script from the beginning. To do this, I typically remove the script tag from the DOM and then re-append it. However, because the script utilizes setInt ...

javascripthtmlreactjs

I'm running into some issues when it comes to uploading and launching my website through cPanel on Namecheap

After adjusting the permissions of all HTML and CSS files to 0755 and image files to 0644 in the public_html folder, I am encountering difficulties publishing the site. It seems like I have hit a roadblock and unsure about what steps to take next... ...

htmlcpanelwebsite-hosting

VueJS - mouse event won't trigger when element is nested within Vue application div

I'd like to incorporate the bootstrap-datetimepicker library into my application, allowing for a date and time picker on the website. After adding the datepicker to my HTML along with the initializing script, I encountered an unexpected issue. The da ...

htmlvue.jsmouseeventvuejs2bootstrap-datetimepicker

The collapsible navbar vanished, where did it go?

While experimenting with the carousel template page, I noticed that the NavBar collapses when the screen width is reduced below a certain pixel size. Initially, everything was working fine as intended. However, after making some modifications to the carou ...

htmlcsstwitter-bootstrap

What is the best way to incorporate background audio in Next.js?

I'm working on a project using Next.js and have encountered an issue with my audio player. Whenever the page is reloaded or left, the audio stops playing. I've tried using an iframe to keep the audio playing in the background, but it prompts me t ...

javascripthtmlreactjsnext.js

C#: Issues with loading static content in MVC on various environments with IIS

Within my C# MVC 4.5 Website, I recently introduced a new folder to host CMS-type applications separately from the main site. While everything seemed fine during local testing, issues arose after deploying the updates to the DEV environment. A closer look ...

c#cssasp.netasp.net-mvciis

Change the function from onLoad to onClick exclusively

I'm experiencing a particle explosion on my webpage due to this code. I connected the onClick function to a button in my HTML so it executes only when that specific button is clicked. However, the function automatically runs when I load the HTML and ...

javascripthtmlthree.js