Styling elements with CSS to display inline blocks next to each other while taking up the full

Question

Styling elements with CSS to display inline blocks next to each other while taking up the full

I am facing a challenge with two text blocks of varying lengths. The left block contains short text while the right block may have lengthy content. Both blocks need to be displayed side by side, occupying 100% of the parent's width exactly.

For a simplified example, you can refer to this code snippet: https://jsfiddle.net/hh6a03cy/1/

<div style="white-space: nowrap; font-size: xx-large;">
  <span>woohoo</span>
  <div style="display: inline-block; overflow-wrap: break-word; width: 100%; white-space: normal; vertical-align: top;">gggggggggggggggggggg...
  </div>
</div>

The issue with this setup is that the right block extends beyond the parent's width, causing a horizontal scroll bar. Ideally, the combined width of both blocks should total 100%, not more or less than that.

Any suggestions on how to achieve this?

Thank you!

html css web

Answer 1

Answer №1

If you want to achieve this goal, flexbox is the way to go and it requires much less CSS.

.wrapper {
  display: flex;
}

.wrapper section {
  margin-left: .5em;
  word-break: break-word;
}

<div class="wrapper">
  <span>awesome</span>
  <section>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
  </section>
</div>

Answer 2

If you want to achieve this goal, flexbox is the way to go and it requires much less CSS.

.wrapper {
  display: flex;
}

.wrapper section {
  margin-left: .5em;
  word-break: break-word;
}

<div class="wrapper">
  <span>awesome</span>
  <section>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
  </section>
</div>

Answer 3

Answer №2

Implementing javascript to dynamically adjust the width:

<html>
    <head>
        <style>
            #container {
                width: 100%;
                box-sizing: border-box;
                font-size: xx-large;
            }
            #left {
                overflow: hidden;
                float: left;
            }
            #right {
                float: right;
                word-break: break-all;
                display: inline-block;
                margin-left: 10px;
            }
        </style>
        <script>
            function setWidth() {
                document.getElementById("left").style.width = document.getElementById('textIsHere').offsetWidth;

                //consider all margins for #left and #right elements
                document.getElementById("right").style.width = document.getElementById('container').offsetWidth - document.getElementById('left').offsetWidth - 10;
            }
        </script>
    </head>
    <body onload="setWidth()">
        <div id="container" onclick="setWidth()">
            <div id="left"><span id="textIsHere">woohoo</span></div>
            <div id="right" >gggggggggggggggg...
            </div>
        </div>
    </body>
<html>

Answer 4

Implementing javascript to dynamically adjust the width:

<html>
    <head>
        <style>
            #container {
                width: 100%;
                box-sizing: border-box;
                font-size: xx-large;
            }
            #left {
                overflow: hidden;
                float: left;
            }
            #right {
                float: right;
                word-break: break-all;
                display: inline-block;
                margin-left: 10px;
            }
        </style>
        <script>
            function setWidth() {
                document.getElementById("left").style.width = document.getElementById('textIsHere').offsetWidth;

                //consider all margins for #left and #right elements
                document.getElementById("right").style.width = document.getElementById('container').offsetWidth - document.getElementById('left').offsetWidth - 10;
            }
        </script>
    </head>
    <body onload="setWidth()">
        <div id="container" onclick="setWidth()">
            <div id="left"><span id="textIsHere">woohoo</span></div>
            <div id="right" >gggggggggggggggg...
            </div>
        </div>
    </body>
<html>

Answer 5

Answer №3

CSS

.container {
    width: 100%;
    box-sizing: border-box;
    font-size: xx-large;
}
.left {
    width: 150px;
    overflow: hidden;
    float: left;
}
.right {
    width: calc(100% - 150px);
    float: right;
    word-break: break-all;
    display: inline-block;
}

HTML

<div class="container">
    <div class="left">woohoo</div>
    <div class="right">gggggg... (text truncated)
    </div>
</div>

white-space: nowrap; would break current result. For improved div width, consider using Javascript for dynamic calculation.

Answer 6

CSS

.container {
    width: 100%;
    box-sizing: border-box;
    font-size: xx-large;
}
.left {
    width: 150px;
    overflow: hidden;
    float: left;
}
.right {
    width: calc(100% - 150px);
    float: right;
    word-break: break-all;
    display: inline-block;
}

HTML

<div class="container">
    <div class="left">woohoo</div>
    <div class="right">gggggg... (text truncated)
    </div>
</div>

white-space: nowrap; would break current result. For improved div width, consider using Javascript for dynamic calculation.

Styling elements with CSS to display inline blocks next to each other while taking up the full

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Bootstrap dropdown menu not showing up/functioning

Replace the checkbox display heading with a text box in the designated area

Creating a button with a water-inspired design using CSS that works seamlessly across

Is there a way to prevent one accordion pattern from automatically closing when another one is opened?

Is it possible to animate multiple SVGs on a webpage with just the click of a button?

Does text disappear when hovered over in CSS?

Generate a standard Wordpress menu containing all pages without the need to manually add each page in the menu editor

The primary HTML file in Angular is unable to access the styles.scss file located in the src/styles directory

Effortlessly Transition to Full Screen with Div Expansion on Click

Invoke a bounded function within an Angular directive using the ng-click event

Trying to arrange HTML elements in a diagonal configuration while ensuring they are all uniform in size

Transform HTML into a Word document format

How can jQuery determine the amount of line breaks within a div element?

Optimizing images for typography in SEO

Difficulty in obtaining the child index upon clicking

Unable to get the Gtranslate function to function properly within the drop-down menu

Why does the content not appear again when switching between tabs?

Enhancing the appearance of text by applying a background color solely to its length

Tips for aligning text in MUI Breadcrumbs

Problem with aligning divs in Bootstrap