What is the best way to prevent blank space when splitting a div into two parts?

Currently in the process of working on a school project that involves creating a website with an integrated database. The foundation for this project is an existing website from a previous assignment, created using PHP/HTML.

The layout of my prior website consisted of a main div divided into two sections: one for text and another for images. Here's a snippet of the code:

.main {
    grid-area: main;
    background-color: #fff;
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-rows: auto;
    grid-template-areas: 
        "text image";
    grid-gap: 4px;
}

While this design served its purpose well in the past, I now require certain pages to exclude the image section entirely. However, omitting content from the image division resulted in excessive white space remaining where it should have been placed.

How can I address this issue?

(Apologies for the rookie inquiry, as I am fairly new to coding. Feel free to reach out if visual aids are necessary.)

Answer №1

From my understanding, it seems like your HTML page is experiencing empty space on the right side of the text when the image is not present in the .main div.

This issue can be resolved by incorporating some JavaScript code.

You just need to verify if an image div exists within the main div and then remove the main class from the main div.

Refer to the Plunker example below for a more detailed explanation on the JavaScript technique => https://plnkr.co/edit/ZXmj47w2IscByQcz?open=lib%2Fscript.js&preview

let removeRightSpace = function(){
var allMainDivs = document.getElementsByClassName("main");
for(let i=0; i<allMainDivs.length; i++){
let d = allMainDivs[i];
if(d.getElementsByClassName("image").length < 1){
   console.log(d.classList); d.classList.remove("main");
    console.log(d.classList);
  }
}
};
removeRightSpace();

Hopefully, this solution will address your problem.

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

Determine the difference between a CSS selector string and an XPath string

Developing a compact querying module (using js) for html is my current project, and I aim to create a versatile query(selector) function that can handle both css selectors and XPath selectors in string form. My dilemma lies in determining whether a given ...

php code to show data in a single column of a table

I am working with a database record that includes an id and name, and I need to display it in a table where records are distributed in the pattern 1-2-1-2-4 across columns. Below is my current code that is generating the incorrect output: <table borde ...

The Div element on my webpage is not adjusting properly to fit the size of mobile devices

My app was created using Quick flip 2, and I needed to resize it for mobile screens, so I implemented jquery-mobile. Here is the code snippet: <!--css--> <style> .quickFlip, .quickFlip3 { height: 350px; width: 400px; } .quickFlip2 { ...

Ways to gradually reveal all elements within a header section

Is there a way to gradually reveal all the components in my header once the window has finished loading by utilizing jQuery's fadeIn function? Below is the pertinent code snippet: HTML <div class="banner"> <header class="header"> < ...

jQuery-powered responsive layout with three columns

I am currently working on creating a dynamic three-column layout that allows users to resize the columns in their browser. Using jQuery for column resizing, I have successfully adjusted the first two columns but am encountering difficulties with the final ...

Adjust the style of an element when hovering over a different element

Below is the HTML code in question: <div> class="module-title" <h2 class="title" style="visibility: visible;"> <span>Spantext</span> Nonspantext </h2> </div> I am looking to change th ...

Content within the two inline divs is experiencing alignment problems?

I am experiencing alignment issues with the content inside two divs that contain multiple nested divs. The content is not properly aligned. CSS Code: .breadcrumb-nav{ margin-left: 230px; left: 70px; top: 70px; width: 1291px; height: 6 ...

Position the icon to the left side of the button using Bootstrap

Need help with centering text on a bootstrap 3 button while aligning the font awesome icon to the left side. <button type="button" class="btn btn-default btn-lg btn-block"> <i class="fa fa-home pull-left"></i> Home </button> Usi ...

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 ...

I am working with a JSON Object in JavaScript and need to retrieve a key using a String variable

Working with a JSON Object in JavaScript can be tricky, especially when trying to access keys stored as Strings using the dot operator. Consider this example of JSON code: "values" : [ { "prop0" : "h", "prop1" : "pizza", "prop2" : "2014- ...

Model is disregarding media queries

Using LESS for CSS compilation, I have encountered an issue with the media query in my code. Specifically, I am attempting to apply different styles for mobile devices but they are not being rendered as expected. #main-wrap header #hdr-nav nav { width: ...

Is it possible to determine if a variable is unset using isset?

Currently, I am utilizing the following code snippet to verify if isset is not set. For instance: if(!isset($_REQUEST['search'])) { } else if(!isset($_REQUEST['submit'])) {} I would like clarification on whether !isset is considered ...

Changing CSS module variables through JavaScript programming

I'm currently utilizing an older version of react-boilerplate that includes CSS Modules, allowing for the creation of variables and the ability to import them into other CSS files. Below is my colors.css file: :root { /* Status colors */ --error ...

Exploring the power of Google Charts in conjunction with PHP arrays

I have three PHP arrays with key-value pairs: $needles = ["Needle1", "Needle2", "Needle3", "Needle4", "Needle5"]; $uph1 = ["Needle1" => 3, "Needle3" => 5, "Needle4" => 7]; $uph2 = ["Needle1" => 4, "Needle2" => 2, "Needle3" => 4]; ...

Tips for implementing automatic line wrapping in a PDF document using React-PDF

I am experiencing an issue with a PDF rendering where very long words are not wrapping onto a new line, instead overflowing the container and disappearing off the page. Below is the setup causing this problem. The styles are listed followed by the actual ...

Tips for aligning website content (including the body and navigation bar) at the center in rtd sphinx

Trying to create documentation with the Read the Docs theme for Sphinx documentation. Want to center the entire webpage, including both the body and left navigation bar so that as the window width increases, the margins on both sides increase equally. Righ ...

What are the best practices for integrating PrimeVue with CustomElements?

Recently, I decided to incorporate PrimeVue and PrimeFlex into my Vue 3 custom Element. To achieve this, I created a Component using the .ce.vue extension for the sfc mode and utilized defineCustomElement along with customElements.define to compile it as a ...

Is it required to double click checkboxes to uncheck them?

My checkboxes require 2 clicks to be unchecked, even though one click is enough to check them. This issue occurs in all 7 checkboxes and there is no onchange() function or similar in TS. import { Component, OnInit, Inject } from '@angular/core&apos ...

I am seeking guidance on extracting specific data from a JSON file and presenting it in an HTML table using jQuery

I am currently working on extracting specific elements from a JSON file and displaying them in an HTML table. I have successfully retrieved the data from the JSON file, stored it in an array, and then dynamically created an HTML table to display the conten ...

How can I implement a recursive nested template call in Angular 2?

Hopefully the title isn't too misleading, but here's my dilemma: I am in the process of building an Angular 2 app and utilizing nested templates in multiple instances. The problem I am facing involves "widgets" within my app that can contain oth ...