Style sheets for two dynamically-sized boxes side by side

Question

Style sheets for two dynamically-sized boxes side by side

There are two boxes or columns positioned on the same line.

Both have varying widths that need to remain on the same row.

To clarify:

.----------container 570px-----------.
|[box1]                        [box2]|  Ideal scenario
|                                    |
|[box1box1box1box1box1box1box1][box2]|  Desirable setup
|                                    |
|[box1box1box1box1box1box1box1]      |  However, if [box1] and [box2] are too wide,
|              [box2box2box2box2box2]|  [box2] will move to a new line
|                                    |
|[box1box1b...][box2box2box2box2box2]|  I want [box1] to be truncated with ellipsis
|____________________________________|

Is it possible to achieve this using only CSS? Alternatively, I could calculate the width of box2 in JavaScript and then adjust the width of box1.
If there is a CSS solution compatible with IE9, that would be fantastic.

html css

Answer 1

Answer №1

While options such as SASS enable the use of variables within stylesheets, performing calculations in CSS is not feasible. One workaround could be to define a max-width for each div to guarantee proper spacing allocation.

Answer 2

While options such as SASS enable the use of variables within stylesheets, performing calculations in CSS is not feasible. One workaround could be to define a max-width for each div to guarantee proper spacing allocation.

Answer 3

Answer №2

To update elements in a single row, designate them as table-cell:

Sample Code:

<div class=horizontal>
  <div>First</div>
  <div>Second</div>
</div>

CSS Style:

.horizontal > * {
  display:table-cell;
}

Check out this demonstration:

http://jsfiddle.net/QYq2R/

Answer 4

To update elements in a single row, designate them as table-cell:

Sample Code:

<div class=horizontal>
  <div>First</div>
  <div>Second</div>
</div>

CSS Style:

.horizontal > * {
  display:table-cell;
}

Check out this demonstration:

http://jsfiddle.net/QYq2R/

Answer 5

Answer №3

Unfortunately, CSS does not support dynamic styling based on the size of content, so you would need to use some clever jQuery to achieve this. Here's how I would approach it:

function AdjustWidths() {
    var TotalWidth = $('#Box1').outerWidth() + $('#Box2').outerWidth();
    var ContainerWidth = $('#Container').innerWidth();

    if (TotalWidth > ContainerWidth) {
        // Reduce the width of Box1 to fit within Container
        $('#Box1').outerWidth(ContainerWidth - $('#Box2').outerWidth());
    }
}

To add the ellipsis, you can further reduce the width of Box1 by a few pixels and then programmatically insert the ellipsis (...).

Edit: Upon re-reading your question, I see that you have already implemented this solution. I'll keep the code here for reference.

Answer 6

Unfortunately, CSS does not support dynamic styling based on the size of content, so you would need to use some clever jQuery to achieve this. Here's how I would approach it:

function AdjustWidths() {
    var TotalWidth = $('#Box1').outerWidth() + $('#Box2').outerWidth();
    var ContainerWidth = $('#Container').innerWidth();

    if (TotalWidth > ContainerWidth) {
        // Reduce the width of Box1 to fit within Container
        $('#Box1').outerWidth(ContainerWidth - $('#Box2').outerWidth());
    }
}

To add the ellipsis, you can further reduce the width of Box1 by a few pixels and then programmatically insert the ellipsis (...).

Edit: Upon re-reading your question, I see that you have already implemented this solution. I'll keep the code here for reference.

Style sheets for two dynamically-sized boxes side by side

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Flask: Data sent via render_template not being rendered in HTML

Tips on configuring a hidden input field to validate a form

Steps for creating a resizable and automatically hiding side menu

Adjust the date input alignment in mobile browsers

Height of the div dynamically increases upwards

Ways to adjust the dimensions of a division element using Bootstrap

Is there a way to retrieve the modal's viewport height in Angular?

Ways to eliminate the Vuetify append-icon from the sequential keyboard navigation

Having trouble with Python Selenium CSS Selector? If your element is not visible, it

using javascript to dynamically color rows in a table based on the value in the status field

"Obtaining Google locations within a modal box - a step-by-step

JavaScript Birthday Verification: Regular Expression Pattern

Rapache and R team up for dynamic leaflet design

List organized in two columns utilizing the data-* attribute

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

Python web scraping is unable to access span elements

Having trouble with the rendering of the Stripe Element Quickstart example

With *ngFor in Angular, radio buttons are designed so that only one can be selected

Leveraging PHP functions for form validation

"Encountering difficulties in dynamically populating a dropdown menu with ng-options in Angular