Split the text on the left side before disrupting the flow on the following line

I recently encountered an issue with my code: https://jsfiddle.net/qchtngzf/1/

When the browser window is too narrow, the div.right text gets pushed onto a new line. Ideally, I would like the div.left text to shrink and break onto a new line instead, while keeping the div.right content in place.

After looking for solutions, I came across this similar problem: Making a div float left, but not "fall" if text is too long. However, even after trying some adjustments, it didn't work for me.

Any help or suggestions would be greatly appreciated.

htmlcss

Answer №1

To ensure proper styling for both the right and left classes, it is important to set a specific width for each:

html, body, header, nav, footer, div, p, ul, li, a {
margin: 0;
padding: 0;
text-decoration: none;
font-family: sans-serif;
font-size: 18px;
}
.left {
  width: 80%;
  float: left;
  position: relative;
} 
.right {
  width: 10%;
}
.clearfix:after {
content: "";
display: block;
 clear: both;
}

hr {
border: 0;
height: 1px;
background-color: #e9e9e9;
margin: 16px 0;
}

section.body {
max-width: 960px;
min-width: 272px;
}

div.left {
color: #1e344c;
float: left;
}

div.left span {
font-size: 14px;
color: #666666;
}

div.right {
float: right;
}
<section class="body">
<div class="item clearfix">
<div class="left">
text text text text text text text text text text text text text text 
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text text text text text text <br>
<span>text text text text text </span>
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text text text text text 
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text <br>
<span>text text text text text text text text text text text text text text text </span>
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text text text <br>
<span>text text text text text text text </span>
</div>
<div class="right">text </div>
</div>
<hr>
<div class="item clearfix">
<div class="left">
text text text text text text text text text <br>
<span>text text text text text text </span>
</div>
<div class="right">text </div>
</div>
</section>

Answer №2

If you wish to ensure that the right section does not wrap to the next line and make the left section shorter, you can utilize the following CSS:

html, body, header, nav, footer, div, p, ul, li, a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 18px;
}


.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

hr {
    border: 0;
    height: 1px;
    background-color: #e9e9e9;
    margin: 16px 0;
}

section.body {
    max-width: 960px;
    min-width: 272px;
}

div.left {
    color: #1e344c;
  width
}
.item {
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
div.left span {
    font-size: 14px;
    color: #666666;
}

div.right {
    white-space:nowrap;
}

Answer №3

1) Ensure that both divs have a specified width

2) Adjust the font size using "vh" units

3) It is unnecessary to set position:relative; for div.left;

div.left{
width:90%;
font-size:2vh;
float:left;
}
div.right{
width:10%;
float:right;
}

Answer №4

Combining various suggestions proved to be the most effective solution. While Teuta's response () addressed one aspect, San's contribution () highlighted another issue and provided a different fix by using white-space: nowrap on div.right.

I am grateful for all the valuable input that greatly assisted in resolving the problem.

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

Preventing Repetition in an HTML List using JavaScript

My HTML list is populated with values from JSON, and I have a button on the page. <button onclick="printJsonList()">CLICK</button> This button triggers the following JavaScript function: function printJsonList(){ console.log(ctNameKeep); ...

javascriptjqueryhtmlcssajax

There seems to be a white space problem located beneath the header photo and the initial

I'm a beginner at coding and working on this project for fun. I'm almost done, but I can't get rid of a white space that's dividing my header from the first section. See the screenshot below: https://i.stack.imgur.com/a1flt.png Even af ...

htmlcss

Is there a way in AngularJS to set all radio buttons to false when one is chosen as true?

When I retrieve true/false string values from the database, I am unable to alter the data. The example I provided is simply a representation of the string values true or false that I receive from the database. My goal is to have a single radio button disp ...

javascripthtmlangularjsradio-button

Add characters to div using JavaScript

I am curious about which framework, if any, would be most effective for capturing keystrokes and adding them to an HTML element such as a "p" element. My goal is to allow the client to type something on the keyboard and have it immediately displayed in the ...

javascripthtmlcssappendkeystrokes

"Troubleshooting: Why does a DT Datatable with selectInputs keep reverting back to

I recently incorporated selectize capability into the selectInputs within a column of a DT datatable in my Shiny app. Following some guidance provided here, I implemented JavaScript to enhance the style and search functionality of selectize. However, due t ...

javascriptcssrshinydt

Looking for a way to add a CSS effect that reveals another image or text when hovering over an image?

My company's website features 10 country flags that, when clicked, display the entire site in that country's language for the user's session. However, I want to take it a step further and have a small image of the respective country appear w ...

asp.netcssvisual-studiohtmlhover

WebView Background Image Displays in Simulator but Not on Actual Device

I am facing an issue while trying to showcase a background image from an HTML document in a UIWebView. Interestingly, the image appears perfectly with text overlay when I preview it on the iOS Simulator or Google Chrome. However, when testing it on my actu ...

htmlioscsswebview

Is there a way to ensure a Bootstrap grid column takes up the entire remaining row space?

I have a dynamic set of elements that need to be inserted into a page, with some elements being labeled as "small" and others as "big". The challenge is that I do not know in advance the quantity or order of these elements. If an element is labeled "small ...

htmlcsstwitter-bootstrapbootstrap-5

Animating path "d" with ReactJS and SVG upon clicking in FireFox

Visit this CodePen for more: https://codepen.io/sadpandas/pen/xxbpKvz const [currentScreen, setCurrentScreen] = React.useState(0); return ( <React.Fragment> <div> <svg className="theSvg" width="156" height="6 ...

javascriptcssreactjssvgonclick

Is it possible to develop a mobile app using Django and HTML5 technologies?

Just curious if any developers out there have experience building an HTML5-based mobile web app with Django. How did you address Django's limited support for certain HTML5 elements and attributes? In hindsight, would you stick with Django or opt for a ...

djangohtmljquery-mobiletwitter-bootstrapkendo-ui

I am attempting to create a form in NodeJs to search for a user in MongoDB by their telephone number using query routing. However, I am puzzled as to why this is not functioning properly

Can you identify the issue in this code? I am able to retrieve the correct mobile number on the console, but it is not being passed to the query routing on /search_user?mob. <input type="tel" name="message" id="mobile_input&qu ...

javascripthtmlnode.jsexpressejs

Is there a way to replace the message 'no rows to show' with a custom component in ag-Grid for react?

Currently, I am utilizing ag-grid in my React application https://www.ag-grid.com. When the table or grid is empty, it displays the default message "No rows to show." However, I am interested in customizing this message or possibly incorporating a custom ...

javascriptcssreactjsag-grid-react

Images do not appear on Bootstrap Carousel as expected

I am facing an issue where the images are not displaying on my bootstrap carousel or when I try to display them individually using their class. I am utilizing bootstrap and express for my project. I have verified multiple times that the file path to the im ...

javascripthtmlexpresstwitter-bootstrap-3

Tips on dynamically looping the formcontrolname and implementing validation strategies

Looking for a way to validate multiple looping of dynamic formControlName="xxx" in select field. Check out my HTML code: <ul *ngFor="let detaillist of stressli.stresstabdetails;"> <li> <div class="form-container"> ...

htmlangulartypescriptangular7

Troubleshooting problem with CSS overflow and absolute positioning on Android Browser

Our mobile web app was created using a combination of JQuery Mobile, PhoneGap, and ASP.net MVC. It is designed to function smoothly on both iOS and Android devices regardless of the browser being used. We have conducted tests on various devices and everyth ...

androidcsscordova

The Javascript toggle for hiding and showing did not function as expected

I've been attempting to create a JavaScript toggle so that when I click on any of the buttons below, only that particular div is shown and all others are hidden. Unfortunately, my code is not working as expected: function toggle(show,hide) { do ...

javascriptjqueryhtml

Are cookies always included in client requests?

With every interaction between the server and browser, cookies are exchanged back and forth. However, what happens when an image is requested? <img src='myPic.jpg' /> Is the browser also sending cookies during this type of request? If i ...

asp.nethtmlcookiesrequest

Creating a React component with a circular loader that displays percentage and texts using Material-UI

I've developed a CircularLoader component using Material UI. The issue I'm facing is that when the variant is set to 'indeterminate', the loader should display without any percentage indication. However, if the variant is 'determin ...

cssreactjsreact-hooksmaterial-ui

When utilizing the 'checkAll' method in a Bootstrap table, it will only select the checkboxes displayed on the current page

I currently have a Bootstrap table on my HTML5 page. When I use the code $('#bk-table').bootstrapTable('checkAll'), only the checkboxes on the current page are checked. Is there a way to check all the checkboxes on all pages? Here i ...

javascripthtmlbootstrap-table

Executing PHP queries with the help of jQuery

Currently, I am developing a webpage that involves checking a checkbox to trigger a PHP function which queries the table for user existence. If the user exists, a button is displayed allowing them to proceed to the next page. I have made an attempt at thi ...

phpjqueryhtmlajax