Unable to separate the text by hyphen when inside a floated component

Here is the desired layout of nested elements as shown in the image below:

https://i.sstatic.net/8TjCw.png

However, the actual appearance of the elements is different than expected...

https://i.sstatic.net/qV7fM.png

I have experimented with various options like overflow and white-space, but I haven't been able to achieve the desired outcome. It seems that the float property is causing the blue-outlined element to collapse in width, leading to no text wrapping.

What steps should I take to correct this issue?

csscss-float

Answer №1

If the last name of an individual is lengthy and does not contain any spaces, the blue outlined element will not be able to align with the left element on the same level.

To ensure that the blue outlined element aligns with the left element on the same level, you need to assign a width to it along with the word-break property.

<div style="width:25%;background:#ccc;float:left;word-break:break-word">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="width:74%;background:#ccc;float:left;margin-left:1%;word-break:break-word">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
</div>

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

the css stylesheet fails to load properly within the Django application

While using static files in my Django app, I encountered a peculiar issue: specifying body{ } in the CSS file can alter the body's attributes, but using the div's id or class name does not affect the div's attributes. Here's an example: ...

pythonhtmlcssdjango

Triumph Diagrams featuring numerous lines and interactive tooltips

While working on a graph that requires zooming and displaying tooltips for each data point, I encountered an issue with overlapping tooltips when adjusting the data set in Victory's documentation. I came across VictoryPortal as a solution to this prob ...

cssreactjsvictory-charts

Having Difficulty Positioning Tooltip Beside Input/Label Field

I have created a tooltip using HTML and CSS that appears when hovering over an image. However, I am encountering alignment issues when placing the image next to a textbox/input as it is not inline with the input box, likely due to some absolute positioning ...

jqueryhtmlcss

What are some tips for keeping design proportions consistent on mobile apps?

Hey there, I have a question that may seem basic to some, but as a newbie in coding, I appreciate your patience. I've been working on an Ionic app and I'm struggling with maintaining CSS proportions of HTML elements. For instance, here's th ...

htmlcssionic-frameworkmobileresponsive-design

Preventing users from clicking on links unless they double click by using CSS rotation

I'm struggling to figure out why only the white portion of my links is clickable. The links are designed as "3D" buttons using CSS rotate transitions, but I can't seem to fix the issue. Any assistance would be greatly appreciated! Check out the ...

htmlcss

How do I create a sliding dropdown notification bar?

Can anyone provide some guidance on how to create a sliding dropdown section for my homepage, similar to the one on this website: . (Please note, be cautious of potential malware) I'm interested in replicating the dropdown section that says "call for ...

javascriptjqueryhtmlcss

CSS fails to load on DJango platform

I am currently working with two apps in my project: Home and Header. The HTML code for the Home app can be found in project_folder -> home -> templates -> home -> base_home.html {% extends 'header/base_header.html' %} <!doctype h ...

cssdjangobootstrap-5

CSS code for a fixed fullscreen menu with scrolling

I have implemented a full-screen menu that covers the entire screen, excluding the header and menu tab bar. You can view it here: https://i.stack.imgur.com/h5cQa.png On smaller screens, the entire menu cannot be displayed at once, as shown here: https://i. ...

htmlcssangular

Centering Text and Icon in a Bootstrap Box

I am struggling to center the text and icons within a box. I want them to be perfectly centered, like this: https://i.sstatic.net/zKtfE.png I've attempted the following: adding inline styles of align-content: center and justify-content: center to th ...

htmlcssbootstrap-4

Utilizing CSS3 to perform multiple 3D rotations

I am attempting to rotate a face of a cube twice in order to have that face fall flat on one side. For reference, please see the illustration of my goal here: https://i.stack.imgur.com/kwO8Z.png I have included my current progress below, using a 45-deg ...

google-chromecsswebkitwebkit-transform

Distinguishing between fonts on a website and Invsion (a tool utilized by designers and front end developers)

I am having difficulty achieving the exact look of our website font as intended by the designer. We have utilized Google's 'Source Sans Pro' font file. I have attempted various strategies: Using the font directly from Google [ Downloading ...

cssfontsfrontendwebfontsweb-frontend

Menu Navigation: Sequentially Colored Badges for Navigation Items

Within the MainService.ts file, there is a function that can alter the color set in badgesColorSet. The json config already defines 3 colors and the goal is for these colors to change each time the website is refreshed - for example, changing from red to g ...

htmlcssangulartypescriptangular-material

When a div is clicked, the text inside the button changes. If another div is clicked, the previous text is reset

I am seeking a solution for changing the text of a button within three columns when a specific 'advice-card' div is clicked on. The text should change to 'Hide' for the clicked div, and the other buttons should switch back to 'Show ...

javascripthtmljquerycss

Methods like jQuery blink(), strike(), and bold() offer dynamic ways to manipulate

I'm currently tackling an inquiry. The code I crafted seems to be functioning without any issues: (function () { if($('#target:contains("bold")')) { $('#target span:first').css('font-weight','bold ...

javascriptjquerycss

Issue with CSS min-height causing divs to not align properly

My CSS Code includes media queries to adjust the layout: .clearfloat { clear: both; font-size: 1px; height: 0; line-height: 0; } .box-container { width:100%; text-align:center; } .icon-box { width:32%; max-width:500px; ...

htmlcss

Scroll horizontally within each row

I am attempting to create a table with individual horizontal scrolling for each row, dynamically. Currently, my code only allows the entire table to scroll horizontally, not the individual rows. https://i.sstatic.net/3oaPl.jpg <table class="table-mai ...

phphtmlcss

Instructions for adding transitions to an entire page in material-ui while maintaining a fixed AppBar

Is there a way to ensure that the material-ui AppBar remains fixed at the top while being wrapped with page contents in a transition? I want the AppBar to transition (e.g. Zoom or Slide) along with the rest of the page contents. I encountered this issue w ...

javascriptcssreactjsmaterial-ui

What is the best way to re-render a component immediately following an update in React?

As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code. const [color, setColor] = useState("black") const bubbleSort = async () => { const sleep = ms => ...

cssreactjsdomdom-events

Ensure that the column remains positioned to the right side of the page (float-right)

https://i.sstatic.net/TBjL6.png I am facing an issue with a three-column layout in one row. Each column is lg-6, but the last column ends up below the other two columns when there is more content in Column 2 than Column 1. The last column (Column 3) is flo ...

htmlcsstwitter-bootstrapbootstrap-4

Issue with videos not playing and difficulty navigating through hyperlinks

Here is the link to my webpage (for preview of my code): I am using Bootstrap 4 for my project. Everything works fine, but I am facing two small issues with the Cookies Box: The animation moves from left to right (which is correct) - but then it returns ...

csstwitter-bootstrapbootstrap-4