Automatically adjusting the size of two divs with an unspecified width

Is it possible for the DIVs to resize based on the size of the nested image? That's what I'm trying to accomplish.

Within a main div, I have two nested DIVs - one with an image to the right and the other with text to the left. I want these DIVs to adjust their sizes according to the dimensions of the image.

For example, if the image in the DIV is 320w x 270h and the total available space is 720px, then I would like the text-containing DIV to resize to around 400px. The width of the left box is already set to auto to accommodate different image sizes, but I need help figuring out how to properly size the text box based on that.

Please let me know if you require any additional information.

jquerycssautosize

Answer №1

Check out this awesome link: http://jsfiddle.net/RnUES/

HTML

<div class="wrapper">
<div class="photo"><img src="http://www.cs.cmu.edu/~chuck/lennapg/len_std.jpg" /></div>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lectus magna, interdum et faucibus a, sagittis ac diam...</div>

</div>​

CSS

.wrapper{width:720px; background:#ccc;}
.photo{float:left;}
.description{overflow:hidden;}

Answer №2

To achieve this effect, JavaScript/jQuery is essential as plain CSS won't cut it.

For a visual demonstration, check out this JSFiddle here.

The process involves using jQuery to calculate the container width, determine the right column's width, and then adjust the left column's width accordingly:

$(document).ready(function(){
    var wrapWidth = $('#wrapper').width();
    var rightWidth = $('#right').width();
    var leftWidth = wrapWidth - rightWidth;
    $('#left').css('width', leftWidth + 'px');
});​

In the provided JS Fiddle example, you can experiment by altering the 'width' attribute of the image to observe how the left column dynamically adjusts its size.

Answer №3

To achieve a similar effect, you can utilize the css property display set to table-row for the main container and table-cell for the inner containers. It's important to note that these styles may not work in versions of Internet Explorer prior to 8, so an alternative approach will be necessary if backward compatibility is required.

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

The Click Event is failing to trigger for a dynamically created ID within a span element

I am currently working on a Task Project. In this project, I have been adding items dynamically and generating items dynamically as well. However, when it comes to deleting items by clicking on a span element, the click event doesn't seem to work. I ...

javascriptjquery

Aligning multiple 'divs' horizontally with different lengths of text

I have a set of 3 identical divs with fixed width. Each contains text of varying lengths and another nested div that is aligned to the right using float. When the text lengths are equal, they align perfectly. However, when the text lengths differ, the ali ...

htmlcss

Set up four divs in a cascading arrangement across four separate columns

Looking to set up 4 cascading divs that create the appearance of being in 4 columns. Here is the given html structure (unable to be modified) <div class="col1"> 1111 <div class="col2"> 2222 <div cl ...

htmlcss

The custom event for dynamic page navigation fails to trigger

I have designed a simple button: <button type="button" class="btn btn-success link-accept" data-id="16">Accept</button> along with its corresponding listener: $(document).ready(function() { $('.link-accept').on('click&apo ...

javascriptjqueryajax

Implementing the CSS link tag in the header of a NextJS 13 application for enhanced styling

In my Next 13 application, I'm looking to link directly to a basic CSS file. Unfortunately, adding it to the Head component hasn't yielded any results for me. I've also attempted to create a custom _document within both the app and pages, bu ...

cssnext.jsnext.js13

Switch out a static full-page image background for an engaging HTML5 video

Is there a simple method to switch out a full-page image background with a video? video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) tr ...

csshtmlhtml5-video

Ensure that the child div completely fills the entire width of its parent container,

My table contains another table within each row. I have implemented scroll overflow for the mobile view, but this causes the rows to not fill the available space and lose their background when scrolling. I have experimented with using width: fit-content a ...

htmlcsshtml-tableoverflowwidth

Display a div in a specific color depending on whether the value is positive or negative, and

I created a counter but I want to change the color of the id="clicks" based on whether the value is positive or negative, and also add text accordingly. var clicks = 0; function clickplus() { clicks += 1; document.getE ...

javascripthtmlcss

Execute the JQUERY keyup function only if the mouse is not currently hovering over the input field

I'm struggling with the keyup function issue. My ordering form contains a certain number of items, some of which are grouped as follows: Item 1 - Group1 Item 2 - Group1 The grouped items have two input fields each, one hidden and one visible. I am ...

javascriptjqueryhtml

Creating a button that utilizes jQuery to send data is a straightforward process

After utilizing Google and this platform, I've managed to create a basic form for sending data using jQuery. Here's my HTML code: <a href="javascript:AddPoke('{news-id}', 'poke')">ADD</a> <div class="area"> ...

phpjquerybuttonsubmitsend

When encountering an "uncaught SyntaxError" in the $.parseJSON function, one may want to investigate

When using this jQuery function, I encounter an Uncaught SyntaxError: Unexpected token u error if the cookie $.cookie('chk_ar') is undefined. function checkBgNoise() { // checks background noise option state, // activates 'on' click i ...

javascriptjqueryjsoncookies

Single parallax movement determined by the position of the mouse cursor, with no margins

Recently came across this interesting code snippet [http://jsfiddle.net/X7UwG/][1]. It displays a parallax effect when moving the mouse to the left, but unfortunately shows a white space when moving to the right. Is there a way to achieve a seamless single ...

javascriptjquerycsshtml

Tips for maintaining a single-line div while adding ellipses:

What is the CSS way to ensure that a div or class contains only one line of text, with ellipses added if it exceeds that limit? I am aware that setting a specific height and using overflow:hidden can achieve this, but it doesn't quite work for my need ...

javascriptcsshtmllayout

Transforming Google Maps from using jQuery to AngularJS

If I have a Jquery google map with find address and routing system, my goal is to convert it to an angular google map with more options. The current Jquery google map code looks like this: var directionsDisplay = new google.maps.DirectionsRenderer({ d ...

javascriptjqueryhtmlangularjsgoogle-maps

Improving the method of extracting an ID from a form submission in Javascript and Django

My current code is functional, but I can't shake the feeling that it's a bit rough around the edges. Here's a simplified version of what I have: JQuery ready: <script type="text/javascript"> $(document).ready(function() { ...

javascriptjquerydjangoformspost

Increase the background image size for a <li> element

I am working with an unordered list and have set it up to display a background image on the li element when the cursor hovers over it: <div class="sidebar"> <ul> <li>test</li> <li>test</li> ...

htmlcssbackgroundhtml-lists

Transformation of visuals with alteration of status

I am attempting to change the image of a door from closed to open when the status changes in my home automation dashboard. I need help with this task. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu ...

javascripthtmlcss

Attach the element to the bottom of the viewport without obstructing the rest of the page

My challenge is to create a button that sticks to the bottom of the viewport and is wider than its parent element. This image illustrates what I am trying to achieve: https://i.stack.imgur.com/rJVvJ.png The issue arises when the viewport height is shorte ...

javascripthtmlcss

What is causing these divs to shift apart instead of staying next to each other when the browser window is resized?

I am facing an issue with two of my divs not staying next to each other when resizing the browser window. They align perfectly when the window is wide, but as soon as I resize it to a narrower resolution, the right div moves below the left one: http://jsfi ...

htmlcsscss-floatwidth

What can I do to keep my button transparent after it has been clicked?

white button I attempted to create a vertical navigation bar with a background image, but when I clicked the button, it changed to white. How can I ensure that the buttons stay white? I've experimented with primary-outline options I found through my ...

csstwitter-bootstrapbuttonfrontendnavbar