Two adjacent divs, flexible with maximum width

I want to create two side-by-side DIVs, with the left one always containing text and the right one possibly being empty.

If the right DIV contains text ... the width of the left DIV should adjust to match the text width, but only up to 50% of the parent DIV's width.

If the right DIV is empty ... the width of the left DIV should adjust to match the text width, up to 100% of the parent DIV's width.

In both cases, if there is too much text to fit on one line, it should wrap onto the next line.

Is it achievable using CSS alone? Or will I need a JavaScript solution?

Appreciate any help!

javascriptjquerycsshtml

Answer №1

To achieve this functionality, you can combine CSS with the scripting language of your choice to dynamically generate page content.

Below is a simple example:

if right-content-exists
    create left column with style="width:50%";
    create right column with style="width:x%";
else        
    create full-width left column.

Answer №2

After pondering over a solution, I realized that JavaScript could be the key.

I have put together an example on jsFiddle that demonstrates the requested functionality.

Here is the code:

/* html */

<div class="parent">
  <div class="left">Lorem ipsum dolor sit amet</div>
  <div class="right">Lorem ipsum dolor sit amet</div>
</div>

/* css */

.left{
    width: 100%;
    float: left;
    outline: solid 1px #666;
}

.right{
    width: 50%;
    float: left;
    outline: solid 1px #666;
}

/* js */

if($('.right').text()){
    $('.left').css('width', '50%');
}

Answer №3

Using only CSS, you can achieve the following layout:

<div class="container">
    <div class="right">Possibly some text, possibly empty</div>
    <div class="left">Text always present here</div>
</div>

Here is the CSS code to make it happen:

.right {
    float: right;
    width: 50%;
}

You can check out the demo at this link.

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

Warning: An unhandled promise rejection has occurred due to a TypeError, as the property 'title' cannot be read since it is undefined

I am encountering an error related to the router.post("/") function in my JavaScript, express, ejs, and MongoDB project. The main objective of this post request is to enable users to save a blog post, which will then redirect them to the main page ("/"). ...

javascriptmongodbexpressejs

Optimal method of triggering ajax post input validation process

I'm currently facing a challenge with looping through inputs to check for empty values and then making an ajax call if all inputs are not empty. Here's my approach: $("#save-material").click(function(){ $('#material input').each(fu ...

jqueryajax

Discover the secret to applying a gradient shade to the "border" element when it reaches full capacity with Vue's innovative Custom CSS package

Utilizing the package https://www.npmjs.com/package/vue-css-donut-chart#usage-with-all-the-available-props to create a "border" effect around images based on progress has presented a challenge. Specifically, achieving a gradient color for the border when i ...

javascripthtmlcssvue.js

Is there a method to globally import "typings" in Visual Code without having to make changes to every JS file?

Is there a method to streamline the process of inputting reference paths for typings in Visual Studio Code without requiring manual typing? Perhaps by utilizing a configuration file that directs to all typings within the project, eliminating the need to ...

javascriptangularjstypescript

Creating subdocuments with input types in MERN stack using Apollo Sandbox and MongoDB mutations

These questions are specific to a Node server application built in JavaScript using express, apollo-server-express, mongoose, and graphql. Below is the content of the package.json file: { "name": "dimond-media-mern-app", "vers ...

javascriptnode.jsexpressgraphqlmutation

Changing a string into a multi-dimensional array using javascript

The following data is retrieved from the REST API: [[5671, 204], [5673, 192], [5674, 120], [5683, 120], [5684, 192], [5685, 204]] When using typeof in JavaScript on the above, it returns a string. To convert it to a multi-dimensional array: <script ty ...

javascriptrestapimultidimensional-arrayxmlhttprequest

Tips for maintaining the same identifier, content, or text despite changes in the DOM

I am curious about a situation where the ID of a div is changed from 1 to 34, but when clicked on, the attribute still returns 1 instead of 34. I apologize for any language errors, thank you. $(document).on('click','.edit_btn:eq(0)& ...

javascriptphpjqueryhtmllaravel

Does clip-path jump at the top because of JavaScript offset?

When hovering on the box, a circle appears and moves based on JavaScript offset values. However, when the circle reaches the second paragraph element, it jumps to the top. I am looking to understand why this is happening and how to ensure smooth movement o ...

javascripthtmlcss

Create a simulation of window.scrollTo in React, similar to preventDefault(), with Jest and Enzyme

I'm currently working on a simple test case that verifies the click of an onSubmit button and checks if preventDefault() is triggered. While this part is functioning correctly, I've encountered difficulty in testing window.scrollTo(). Could some ...

javascriptreactjsreact-nativejestjsenzyme

What is the best way to create a screen capture of a webpage using a URL?

Currently working on a Spring MVC website project, I have implemented a form requesting the user's website URL. Once entered, I aim to display a screenshot of the specified website for the user to view. Contemplating whether to generate the image on ...

javascriptspring

Developing a division with an image source based on the selection of a checkbox

My goal is to develop a "change function" that generates a new div for each checked checkbox selection and removes the div when the checkbox is unchecked. These new divs should also display the img src of the selected checkbox. Currently, my JavaScript c ...

javascriptjqueryhtml

Trouble sorting Angular Material Data Table?

[UNIQUE LINK] I'm working on a simple Angular material data table with sorting. I've gone ahead and added the MatSortModule, used @ViewChild in my component class, included the directives, set up the dataSource.sort property, and even see the ar ...

javascriptangulartypescriptangular-material

Using Javascript to set a maximum height limit for rows or cells within an HTML table by adjusting the table width

I am currently working on a straightforward JavaScript solution that proves to be useful when utilizing overflow-x:auto in tables. The script aims to decrease the height of rows by increasing the width of the table until the rows reach the desired height. ...

javascript

Integrating a Find Pano functionality into a Kolor Panotour

I used a program called Kolor to create a panorama. Now, I am attempting to integrate the "find pano" feature, which involves searching through the panoramic images for display purposes. I have come across an HTML file that contains the search functionalit ...

javascripthtmlcsssearchpanoramas

What is the reason that the text-overflow property does not function properly within a nested flexbox

Why does my overflow text only show ellipsis when one parent element with display: flex is removed? It seems the text width determines the parent's width rather than using ellipsis. To test this behavior, try reducing the browser width in the provided ...

htmlcss

Python, JavaScript, and Selenium RC all work together within loop statements on .aspx pages

I've been diving into Python on my own for the past few months. My initial project involves creating a browser driver test case with the Selenium RC web driving framework (I'm avoiding importing webdriver to keep things simple). The goal is to ha ...

javascriptpythonseleniumselenium-rc

Having issues binding v-on:change.native in the parent component of Vue.js

I have a component that includes a checkbox input: <template> <input id='one' type='checkbox' v-on:change.native="$emit('change')" /> </template> In another component, I am utilizing this component: &l ...

javascriptvue.jsvuejs2vue-component

Ways to append a number to the start or end of an array using JavaScript

Can you help me figure out why the function to order the "s" array from minor to major is adding the number at the end instead of the beginning? The if statement seems to be true (2 < 7 = true) but the logic is not working as expected. Any advice on how ...

javascriptarraysloops

Issue with Tailwind classes not applying correctly upon refreshing the page in production settings

Challenge Description: Encountering an issue with my nextjs project that utilizes tailwindcss. The login page initially loads with the required classes for the UI, but upon refreshing the page, the classes disappear from the DOM, causing a broken UI. Her ...

javascriptreactjsnext.jstailwind-csscss-purge

css Problems with the height of the tab bar

Trying to set up a tab bar with additional padding on hover, but encountering an issue where the parent div moves on hover state. Here is the HTML code: <div id="statNav"> <a href="#">Gogus</a> <a href="#">Kol ...

htmlcss