CSS Wordwrap behaving inconsistently

Question

CSS Wordwrap behaving inconsistently

After consulting a forum post, I am attempting to implement and grasp the recommended method for aligning two divs side by side using the overflow property.

Initially, the two divs align properly with my brief text. However, when I introduce longer text, it shifts below the image. Can someone shed light on why this is occurring and provide guidance on resolving it?

Visit my JSFIDDLE: Link

HTML:

<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
    <img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" />
</div>
<div class="right">
    <div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>

CSS:

div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}

div.left {
padding:5px;
float: left;
}

div.right { 
float: left;
}

.thumb-small{
width:35px;
height:35px;
border: 1px solid #B6BCBF;
}

css html

Answer 1

Answer №1

Floats have a tendency to expand in order to contain their content, typically up to the width of the surrounding area regardless of positioning. This is why they may wrap to a new line when the text is lengthy.

If you are aiming to position an image to the left of some text, you will need to apply clearfix CSS to the outer region (to ensure all floats are encompassed):

.container {
  overflow: hidden;
  min-width: 1px;
}
/* For IE7 and newer */
*+html .container {
  min-height: 1%;
}

Following this, float only your image to the left and refrain from floating your content. Adjust margins around the image as needed, for example:

.left {
  float: left;
  margin: 0 10px 10px 0; /* 10px spacing on the right and bottom */
}

By following these steps, the content within the div will behave as expected.

Answer 2

Floats have a tendency to expand in order to contain their content, typically up to the width of the surrounding area regardless of positioning. This is why they may wrap to a new line when the text is lengthy.

If you are aiming to position an image to the left of some text, you will need to apply clearfix CSS to the outer region (to ensure all floats are encompassed):

.container {
  overflow: hidden;
  min-width: 1px;
}
/* For IE7 and newer */
*+html .container {
  min-height: 1%;
}

Following this, float only your image to the left and refrain from floating your content. Adjust margins around the image as needed, for example:

.left {
  float: left;
  margin: 0 10px 10px 0; /* 10px spacing on the right and bottom */
}

By following these steps, the content within the div will behave as expected.

Answer 3

Answer №2

To fix the issue with vertical placement of floated elements, it is recommended to remove the float rule on the long text. When one element is floated after another, it should not come before it vertically.

<div>
    <div style="word-wrap: break-word;">Long text content goes here Long text content goes here Long text content goes here Long text content goes here</div>
</div>

For more detailed information, refer to W3's documentation.

The outer top of a floating box should not exceed the outer top of any block or floated box created by an element earlier in the source document.

Answer 4

To fix the issue with vertical placement of floated elements, it is recommended to remove the float rule on the long text. When one element is floated after another, it should not come before it vertically.

<div>
    <div style="word-wrap: break-word;">Long text content goes here Long text content goes here Long text content goes here Long text content goes here</div>
</div>

For more detailed information, refer to W3's documentation.

The outer top of a floating box should not exceed the outer top of any block or floated box created by an element earlier in the source document.

Answer 5

Answer №3

Try removing the float:left; from the style rule to see if that resolves the issue. Consider also optimizing and testing for compatibility with Internet Explorer versions 6 and above.

Answer 6

Try removing the float:left; from the style rule to see if that resolves the issue. Consider also optimizing and testing for compatibility with Internet Explorer versions 6 and above.

Answer 7

Answer №4

To prevent your text from taking up too much space and to ensure it wraps to the next line for maximum visibility, you need to set the max-width attribute.

Check out this example on jsFiddle

<div class="container" style="overflow: hidden; width: 100%">
    <div class="left">
        <img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
    </div>
    <div class="right">
    <div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here   Some long text here Some long text here Some long text here </div>
    </div>
</div>

<br>

<div class="container" style="overflow: hidden; width: 100%">
    <div class="left">
        <img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
    </div>
    <div class="right">
    <div style="word-wrap: break-word;">Some short text here</div>
    </div>
</div>

Answer 8

To prevent your text from taking up too much space and to ensure it wraps to the next line for maximum visibility, you need to set the max-width attribute.

Check out this example on jsFiddle

<div class="container" style="overflow: hidden; width: 100%">
    <div class="left">
        <img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
    </div>
    <div class="right">
    <div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here   Some long text here Some long text here Some long text here </div>
    </div>
</div>

<br>

<div class="container" style="overflow: hidden; width: 100%">
    <div class="left">
        <img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
    </div>
    <div class="right">
    <div style="word-wrap: break-word;">Some short text here</div>
    </div>
</div>

Answer 9

Answer №5

The advice suggests that it's important to set the width of floated elements. For a deeper understanding of floats, check out this informative resource:

      http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Answer 10

The advice suggests that it's important to set the width of floated elements. For a deeper understanding of floats, check out this informative resource:

      http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

CSS Wordwrap behaving inconsistently

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Writing to multiple files using the file_put_contents function

Hide object scroll percentage with CSS styling

Deciphering base64 encoded data inside an HTML document and substituting these encoded strings with their decoded representation using Python

Utilizing ng-href in Angular.js Template: A Guide

Bx Slider not displaying second slide on mobile devices

How can I retrieve all the data for the chosen item in a mat-select within a mat-dialog, while still preserving the code for setting the default selected value

Having trouble bringing in icons from the @mui/icons-material library

Updating the video tag's source attribute using JSON information

I must modify the HTML code so that it can generate a random response to a webhook, rather than providing a fixed reply

Navigate through the website by transforming the arrow and clicking the link

Tips for moving a title sideways and adjusting the bottom section by x pixels

The for loop seems to be malfunctioning when placed within the append function

Unveiling the Invisible: A Guide to Revealing Conce

Issue displaying values in select option tag

Is there a way to add a disappearing large space that vanishes when a line break occurs?

Trouble with Bootstrap Popover's visibility

When attempting to print a Rectangle on my webpage using JavaScript and taking user input, I encountered an error stating that 'str' is not defined

Transforming color images into black and white using JavaScript

Retrieve an item from the Ionic Firebase database

Using Javascript to extract data from the <pre> tag and store it into an array