Setting the width of a div element dynamically according to its height

Here is a snippet of my HTML code:

<div class="persoonal">
    <div class="left"></div>
    <div class="rigth"></div>
</div>

This is the CSS code I have written:

.profile {
width: 100%;}

.left {
width: 50%;
float: left;
height: auto;
display: inline-block;}

.rigth {
float: right;
width: 48%;
height: 100px;
display: inline-block;}

I am new to working with HTML and CSS, and I am facing a challenge.

I want the width of the left div to be 50% when the height of the right div is 100px. If the height of the right div exceeds 100px, then I want the width of the left div to be 100%.

If anyone has any advice or suggestions on how to achieve this, I would greatly appreciate it. Thank you in advance!

javascripthtmlcss

Answer №1

To achieve this using jquery:

    var container_width = $( ".content" ).width();
var sidebar_height = $( ".sidebar" ).height();
if(sidebar_height == '100')
    $( ".content" ).width('50');
if(container_width == '100')
    $( ".content" ).width('100');

This method will help you accomplish the task.

Answer №2

Based on my understanding, this solution may be helpful:

if ($('.rigth').height() > 100) {
  $('.left').css("width", "100%");
}
.profile {
  width: 100%;
}
.left {
  width: 50%;
  background: red;
  float: left;
  height: auto;
  display: inline-block;
}
.rigth {
  float: right;
  background: blue;
  width: 48%;
  height: auto;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="persoonal">
  <div class="left">Test</div>
  <div class="rigth">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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

Assign a class to a button created dynamically using Angular

While working on my project, I encountered an issue where the CSS style was not being applied to a button that I created and assigned a class to in the component.ts file. Specifically, the font color of the button was not changing as expected. Here is the ...

cssangulartypescriptcomponentssetattribute

Tips for ensuring nvm is activated whenever the nvmrc file is updated

I have implemented the use of direnv along with an nvmrc file to ensure that nvm install runs every time the directory is entered. This ensures that the correct node version is used when working on the project. However, I have noticed that if another user ...

javascriptnode.jsnvm

Organizing and recycling React styled-components and native elements

As a backend engineer transitioning to frontend development, I am currently learning React and exploring styled-components for styling components. However, I am facing challenges in using styled-components with native React components and updating them in ...

javascriptreactjsstyled-componentsmodularity

Creating Virtual Nodes from a string with HTML tags in Vue 2.5: A Step-by-Step Guide

Having some trouble creating a functional component that displays the Feather Icons package - I'm stuck on the final step. Here's what I have so far: This is my FeatherIcon.vue component. <script> const feather = require("feather-icons"); ...

javascriptvue.js

A step-by-step guide on transferring Data URI from canvas to Google Sheet using the fetch method

I am trying to send an image as base64 code to a Google sheet using fetch. However, I am encountering an error that says "data_sent is not defined" when I run my code. I need help identifying the problem and finding a solution to fix it. For reference, & ...

javascripthtml

The error message indicates that the Worklight adapter is an object, not a function

Upon deploying the Worklight adapter to the production server, I encountered an error when the adapter called a Java code from JavaScript: Procedure invocation error. Ecma Error: TypeError: Cannot call property updateProposal in object [JavaPackage com.id ...

javajavascriptibm-mobilefirst

How can you switch between CSS styles using JQuery?

Is there a way to change CSS properties every time I click using jQuery? I couldn't find any information on this specific topic. Can someone guide me on how to achieve this with jQuery? I want the background color to change each time it is clicked. W ...

javascripthtmljquerycss

Initiating a file download using HTML

When I try to initiate a download by specifying the filename, instead of downloading, it opens in a new tab. The code snippet below shows what I am currently using. Additionally, I am working on Chrome Browser. <!DOCTYPE html> <html> < ...

javascripthtmlcssanchorhref

Is it possible to automate the firing of setTimeout events using WebDriver?

Looking to test pages with numerous setTimeout functions, I'm searching for a way to expedite the code execution upon page load rather than waiting for it to run on its own. One idea is to inject custom JavaScript like this into the page before evalu ...

javascriptseleniumwebdriverchromium

Remove child elements in Jquery that do not match the specific numbers saved in the array

I've got this array: var numbersArray = [1, 2, 4, 5] and also an unordered list in HTML <ul> <li> item 1 </li> <li> item 2 </li> <li> item 3 </li> <li> item 4 </li> <li> item 5 ...

javascriptjqueryarrays

Attempting to maintain the main navigation highlighted while browsing through the secondary navigation

I am facing a small issue that seems like it should be an easy fix, but I can't seem to figure it out. While working on my site, I'm having trouble keeping the parent navigation highlighted when scrolling through the sub-menu. If you hover over ...

javascripthtmlcsshovernav

The ASP.Net email contains a hyperlink designed to open in a new window

I am currently facing an issue with an email I need to send. The problem lies in the hyperlink that is intended to open a specific page in a new tab or window upon clicking. The main issue at hand is that there is no space between the querystring variable ...

javascripthtmlasp.netvb.net

What could be causing the EBUSY: resource busy or locked, open errno: -4082 error to appear while trying to build storybook 7 in next.js 13?

While attempting to create a storybook, I encountered the following error in my project: [Error: EBUSY: resource busy or locked, open 'C:\Users\ali\Desktop\Works\Design Systems\projects\storybook-test2\node_modu ...

javascriptreactjsnpmnext.jsstorybook

The code generated by Asto SSR may not be compatible with older iOS versions, causing it to fail to run

I have been running my astro SSR site on Netlify with great success. However, I recently encountered an issue when testing it on older iPhone models like the iPhone 6 and earlier. It seems that all script executions halt, rendering the site non-interactive ...

javascriptsafarisvelteios12astrojs

When utilizing jQuery to retrieve the height of position:absolute elements, the script is being executed twice, resulting in inaccurate values being returned on

The issue I'm encountering with detecting the height of absolutely positioned content is demonstrated in this JSFiddle. I am working on creating a tabbed panel where users can select a room type and then a sub-type. The sub-types (ul.sub-types) are s ...

jqueryhtmlcss

In node.js, what is the syntax for invoking a function within a struct from that same function?

Here is a brief overview of my code: exports.entity = { name: "Foo", //Etc... start: function () { this.attack(); }, attack: function () { setTimeout(attack, 1000); //Doesn't work ...

javascriptnode.js

struggling to access the value of a hidden field by using the parent class name

My coding experience so far looks like this- <tr class="chosen"> <td id="uniqueID">ABCDE5678</td> <input type="hidden" value="000005678" id="taxCode"> <td id="fullName">Z, Y</td> </tr> In this scenario, I need to ...

javascriptjqueryhtml

Using Javascript to Change Background Color on Button Click

The button press does not result in a change of the background color. What could be causing this issue? var body = document.getElementsByTagName("body"); var bgbutton = doucument.getElementById("bgchange"); bgbutton.onclick = function() { body.style.b ...

javascripthtmlcss

javascript accessing all data in firebase real-time database using JavaScript the right way

Working with node.js, I am retrieving data from the firebase real-time database. However, the data is being returned in the following format: Data Retrieval Code import firebaseApp from '../config.js'; import { getDatabase, ref, onValue } from & ...

javascriptnode.jsjsonfirebase-realtime-database

What methods can I use to adjust the selected option according to the value in the database?

To introduce you to my work, I have a table filled with data from a database that functions as a CRUD - Create, Read, Update, Delete table. Within this table, there is a column where EDIT and DELETE buttons are located. Clicking on the EDIT button trigger ...

javascripthtmlajax