Home/ Questions/Q 6685201
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:01:51+00:00

I got to deep in this problem and can not see the forest out

  • 0

I got to deep in this problem and can not see the forest out of all the trees around me… but maybe there is a quick solution for this. I work with CSS 3 and cannot add 2 div’s in one line with the following condition:
1. DIV dynamic width and cutting text.
2. DIV next to 1. DIV (inline) with fixed with.

So if the container (sourounding DIV) is 300px. And the 2. DIV is 100px. I expect that the 1. DIV gets a size of 200px (dynamic) and cutting its text if needed.

So this is the code from my side so far:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .container {
            width: 200px;
            border: 1px solid black;
        }
        .info {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .dynamicWidth {

        }
        .staticWidth {
            width: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="dynamicWidth">
            <div>Title element</div>
            <div class="info">Text: This is a text which should be break with 3 dots when it is bigger then its parent div</div>
        </div>
        <div class="staticWidth">BUT</div>
    </div>
</body>

Unfortunately, all the time the 2. DIV is below the 1. DIV.

Thx for your hints.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, I found a fitting solution: 

        <!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .container {
            border: 1px solid black;
            position: relative;
        }
        .info {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .dynamicWidth {
            margin-right: 30px;
        }
        .staticWidth {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            top: 25%; /*centers the content of this div in middle of height*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="dynamicWidth">
            <div>Title element</div>
            <div class="info">Text: This is a text which should be break with 3 dots when it is bigger then its parent div</div>
        </div>
        <div class="staticWidth">BUT</div>
    </div>
</body>
    • 0