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

Adjusting the height of an element as you scroll will activate the scroll event

One issue I'm facing is with adding a class to my header. The goal is to reduce the height of the top part of the header when the user scrolls down and then remove the class when they scroll back up. While this functionality is working, there is an un ...

javascriptjquerycssonscroll

The HTML Bootstrap collapse feature is not functioning correctly upon the initial button press

Could you assist me with implementing a bootstrap and javascript collapse feature? I have two collapsible cards. The first card should be visible initially, but then switch to the second card when clicked on a link. However, upon the first click, both card ...

javascripthtmltwitter-bootstrap

Tips for correctly updating the status of a checkbox linked to a database

I need some guidance on handling the state change of an input checkbox in React. The checkbox's initial value is determined by a boolean retrieved from a database. Currently, I am using defaultChecked to set the checkbox initially based on this boolea ...

javascriptreactjscheckbox

How can you align square cells within a container using CSS grids while maintaining a consistent grid gap?

Our objective is to perfectly align square cells with the edges of their container while maintaining a consistent gap between cells in each row and column. Although this Codepen solution is close, there are two key issues: (1) vertical spacing doesn' ...

htmlcsscss-grid

Running a service in Express.js without being dependent on incoming requests

I have a backend application built using nodeJS and express. The architecture consists of two main files, app.js for handling express configuration, controllers, and MongoDB connection, and index.js strictly for server creation. Now, I am looking to imple ...

javascriptnode.jsexpressbackend

How can CSS be used to center multi-line text with the shortest line appearing at the top

I'm currently working on some html and css code that looks like this: <div style="width: 40em; text-align: center;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard du ...

htmlcsstextalignment

Convert the MySQL DATE column from numerical month to full month name

I'm having trouble figuring out a simple solution. I'm using the code below to generate a tree grid from a MySQL database. $sql2 = mysql_query("SELECT DISTINCT YEAR(date) FROM blogs ORDER by YEAR(date) desc")or die(mysql_error()); $archive .= "& ...

phphtml

Troubleshooting Issues with JavaScript Counter and JSON Integration

When manually inserting a number into the HTML, the counter works fine. However, when pulling data remotely, there seems to be a problem. The remote data is logging correctly in the console and appears properly in the DOM element when the counter code is d ...

javascriptjqueryjsonajaxxml

When sending a request from Vue.js using Axios to PHP, the issue arises that the .value property is

There is a chat box with bb smileys underneath. Clicking on the smileys adds them to the text in the input box. However, when using axios to post, the array is empty. Manually entering the smiley bbcode works fine. <input id="txtName" @keyup.enter="ad ...

javascriptvue.jsaxios

Unspecified variable in AngularJS data binding with Onsen UI

I am new to Onsen UI and AngularJS, and I have a simple question about data binding. When I use the variable $scope.name with ng-model in an Onsen UI template, it returns as UNDEFINED. Here is my code: <!doctype html> <html lang="en" ng-app="simp ...

javascripthtmlcssonsen-ui

Enhance Your Images: Creating Stunning Colored Overlay Effects using HTML and CSS

I'm currently working on implementing an overlay effect for images on a webpage. The idea is that when the cursor hovers over an image, it will change color slightly. However, I'm facing some issues and the desired effect is not reflecting. How c ...

htmlcssoverlay

Invoking a class method in Javascriptcore on iOS

I'm currently trying to comprehend the inner workings of JavascriptCore. Initially, I attempted calling a single function. Now, my focus has shifted to invoking a function within a class. This is what my javascript code looks like: var sayHelloAlf ...

javascriptiosobjective-c

Is it possible to create a compound editor within a cell in SlickGrid that contains two date fields

Currently, I am implementing SlickGrid with jQuery and I am interested in incorporating a compound editor within a cell similar to example 3a mentioned here. However, instead of two text fields, I would like to have two date fields. Although Example 3 dem ...

javascriptjquerydatagridslickgrid

Only if there is an update in the SQL database, I wish to refresh the div

I have created a voting system and I am facing an issue with the data updating. I have implemented a setInterval function in javascript to load the data every 2 seconds, but it's not working as expected. There are no errors shown, but the data is not ...

javascriptphpjquery

Restrict the Angular ng-repeat directive to specific rows only

Suppose we have a JSON dataset listing all languages of books: $scope.data = [{ "title": "Alice in wonderland", "author": "Lewis Carroll", "lang": ["en"] }, { "title": "Journey to the West", "author": "Wu Cheng'en", "lang": [" ...

javascriptangularjsangularjs-ng-repeat

What causes my CSS to be disrupted by a line break in one instance but not in another? (view demonstrations)

https://i.stack.imgur.com/bitod.png In comparing this particular fiddle with another version of the same fiddle, the only variance is that in the second one, there is </label><label for="address_zip" class="zip"> without a line break following ...

htmlcsscharacter-encodingchar

When incorporating @babel/standalone, a JavaScript memory limit is exceeded

I am currently working on a React app that I developed using create-react-app. My main goal is to take user input as code and then evaluate it in order to render the output. Here's what I have attempted so far: import React, { Component } from &apos ...

javascriptreactjsbabeljs

overlapping text placed directly above another text

Is there a way to place a text fragment above another part of the same line? <div>Th<div class="ac">Am</div>is is an ex<div class="ac">E</div>ample line</div> If implemented, it should display as: Am E This ...

htmlcss

"Learn the step-by-step process of generating a transcript with a WebVTT file in JWPlayer

We have integrated JWPlayer into our website and are now looking to add transcript captioning. I have attempted to create a sample application using regular HTML code, but have not been successful. Despite reviewing multiple tutorials, I was unable to ach ...

jqueryhtmljwplayerwebvttinteractive-transcript

Exploring ways to create a dynamic background image that allows the rest of the page to float over seamlessly

Currently working on a responsive website and almost done with the build. However, I came across a site where an image appears to be floating behind the rest of the webpage content. Tried searching for a solution using w3.css without any luck. Any sugge ...

htmlcssresponsive-design