Create a dynamic HTML design with a resizable left panel and a static right panel. The left panel should not wrap text and display ellipsis if necessary

Question

Create a dynamic HTML design with a resizable left panel and a static right panel. The left panel should not wrap text and display ellipsis if necessary

I am looking to display items in a list with a specific format:

|Name                               |    Some other val1|
|Very very long no wrap line that...|    Some other val2|

The right side needs to have a fixed width.
The left side should fill all available width up to the right pane.
This layout must be responsive to screen resizing, especially for mobile devices where orientation changes occur frequently.
Text on the left side must not wrap and should be truncated using ellipsis (text-overflow: ellipsis).

In simpler terms:

|<-- flexible, multi-line, but not wrapping (uses ellipsis) -->|<-- fixed width -->|

I've experimented with float: left, float: right, overflow:hidden, and margin adjustments without success! Would it be better to use a table?

html css

Answer 1

Answer №1

To achieve the desired layout, you can employ a mix of display:inline-block along with vertical-align:top, ensuring there is no whitespace between elements, as indicated by the HTML comment - take a look at this detailed explanation. Additionally, utilizing CSS calc() proves to be beneficial.

HTML Code:

<div class="parent">
    <div class="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac feugiat leo. Nam varius ante nec nisi tincidunt volutpat. In hac habitasse platea dictumst.</p>
    </div><!--
    --><div class="right">
    </div>
</div>

CSS Styling:

html,body,.parent{
    width:100%;
    height:100%;
}

.right{
    height:100%;
    width:100px;
    background:red;
    display:inline-block;
    vertical-align:top;
}

.left{
    width:calc(100% - 100px);
    height:100%;
    background:blue;
    display:inline-block;
    vertical-align:top;
}

p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

JSFiddle Demo

Check browser compatibility for calc()

Important Note: The CSS reset used here is from Eric Meyer’s “Reset CSS” 2.0.

Answer 2

To achieve the desired layout, you can employ a mix of display:inline-block along with vertical-align:top, ensuring there is no whitespace between elements, as indicated by the HTML comment - take a look at this detailed explanation. Additionally, utilizing CSS calc() proves to be beneficial.

HTML Code:

<div class="parent">
    <div class="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac feugiat leo. Nam varius ante nec nisi tincidunt volutpat. In hac habitasse platea dictumst.</p>
    </div><!--
    --><div class="right">
    </div>
</div>

CSS Styling:

html,body,.parent{
    width:100%;
    height:100%;
}

.right{
    height:100%;
    width:100px;
    background:red;
    display:inline-block;
    vertical-align:top;
}

.left{
    width:calc(100% - 100px);
    height:100%;
    background:blue;
    display:inline-block;
    vertical-align:top;
}

p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

JSFiddle Demo

Check browser compatibility for calc()

Important Note: The CSS reset used here is from Eric Meyer’s “Reset CSS” 2.0.

Answer 3

Answer №2

Attempting to achieve the same goal has been a challenge for me before.

Ultimately, I resorted to using tables, and surprisingly, it wasn't as dreadful as anticipated.

I used to have a fear of tables, but now I am confident in utilizing them whenever needed.

In this scenario, using tables is the most effective approach unless you are open to incorporating javascript.

Embrace the use of tables without hesitation.

Answer 4

Attempting to achieve the same goal has been a challenge for me before.

Ultimately, I resorted to using tables, and surprisingly, it wasn't as dreadful as anticipated.

I used to have a fear of tables, but now I am confident in utilizing them whenever needed.

In this scenario, using tables is the most effective approach unless you are open to incorporating javascript.

Embrace the use of tables without hesitation.

Answer 5

Answer №3

Implement the text-overflow: ellipsis property in the left panel

Here is an example:

<ul>
    <li>
        <div class="right">RIGHT VALUE</div>
        <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at mi faucibus, fringilla purus non, blandit nibh. Cras non volutpat augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque varius eu leo quis molestie. Sed scelerisque nisl a felis interdum, nec gravida odio condimentum. Integer tellus leo, luctus vitae gravida et, ultrices quis justo. Etiam id dignissim diam. Suspendisse mattis nec odio sit amet adipiscing. Nullam nec ornare massa. Fusce gravida enim eget tellus lobortis cursus. Curabitur venenatis dignissim nisi ut auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
    </li>
</ul>

css

ul li .left {
    margin-right: 100px;
    height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
ul li .right {
    float: right;
    width: 100px;
    background-color: #ccc;
}

http://jsfiddle.net/HMB8c/

Answer 6

Implement the text-overflow: ellipsis property in the left panel

Here is an example:

<ul>
    <li>
        <div class="right">RIGHT VALUE</div>
        <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at mi faucibus, fringilla purus non, blandit nibh. Cras non volutpat augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque varius eu leo quis molestie. Sed scelerisque nisl a felis interdum, nec gravida odio condimentum. Integer tellus leo, luctus vitae gravida et, ultrices quis justo. Etiam id dignissim diam. Suspendisse mattis nec odio sit amet adipiscing. Nullam nec ornare massa. Fusce gravida enim eget tellus lobortis cursus. Curabitur venenatis dignissim nisi ut auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
    </li>
</ul>

css

ul li .left {
    margin-right: 100px;
    height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
ul li .right {
    float: right;
    width: 100px;
    background-color: #ccc;
}

http://jsfiddle.net/HMB8c/

Create a dynamic HTML design with a resizable left panel and a static right panel. The left panel should not wrap text and display ellipsis if necessary

Answer №1

Answer №2

Answer №3

Similar questions

Ways to prevent hidden fields from being submitted in a form?

The absence of a datepicker in Bootstrap has become glaringly obvious

Utilizing CSS to Display a Variety of Colors within a Text String

Using session variables on a different php page

"Struggling to position the bottom navbar at the center in Bootstrap?

Influence of scoped styles on external webpages

Guidelines on centering an AJAX spinning animation within a parent div

Tips for using jQuery to add or append a class to the final li element

How can I turn off Angular Grid's virtualization feature, where Angular generates div elements for the grid based on height and width positions?

Designing a drop-down menu that appears visually above its parent

Unable to view Bootstrap Icons in Gulp 4

Multiple keyup events being triggered repeatedly

The style of CSS remains constant within the JSP file

Issues with implementing Bootstrap tabs in Vue application

Unable to eliminate italicized text within collapsible content

Unable to dismiss message in Django

Quiz application utilizing MySQL and JSP technology

I'm looking to incorporate XML data into table cells using JQuery. How can I go about creating this table?

Use jQuery to set the onclick attribute for all elements rather than relying on inline JavaScript

Obtain the state name after selecting it from the drop-down menu and clicking the submit button (part 3)