How can I prevent floated div elements from wrapping when the browser is re-sized?
Wrap them in another div, which has a width (or min-width) specified.
<div class="parentContainer">
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
</div>
.parentContainer {
/* The width of the parent needs to be equal to the total width of the children.
Be sure to include margins/padding/borders in the total. */
width: 600px;
overflow: auto;
}
It also helps to have overflow: auto specified on the containing div, to allow its height to match the child floats.
Prevent wrapping of floated span element with CSS
You can set .title
to white-space:nowrap
+ display:table
.
.title {
white-space: nowrap;
display: table;
}
.title {
background-color: lightblue;
color: green;
white-space: nowrap;
display: table;
}
.description {
font-weight: bold;
color: black;
}
Long:
<div class="container">
<h3 class="title">
title
<span class="description">descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription</span>
</h3>
</div>
<br>
Short:
<div class="container">
<h3 class="title">
title
<span class="description">description</span>
</h3>
</div>
Prevent float from wrapping and force text-overflow when needed
Use flexbox:
div {
background: #abcdef;
display: flex;
}
.name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.size {
margin: 0 .5em;
}
.price {
margin-left: auto;
}
<div>
<span class="name">Blue Widgets Over Miami</span>
<span class="size">large</span>
<span class="price">$9.99</span>
</div>
<br />
<div>
<span class="name">Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami</span>
<span class="size">large</span>
<span class="price">$9.99</span>
</div>
Is it possible to prevent wrapping of child elements in HTML?
If you don't want wrapping, you should not use floats - they were created specifically for wrapping.
Use a parent container with overflow:auto
and white-space:nowrap
and children with display:inline
or inline-block
.
Prevent floated divs from wrapping to new line
This should be all you need.
.float-wrap {
/* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
width: 816px;
border: 1px solid;
/* causes .float-wrap's height to match its child divs */
overflow: auto;
}
.left-floater {
width: 100px;
height: 100px;
border: 1px solid;
float: left;
}
.outer {
overflow-x: scroll;
}
<div class="outer">
<div class="float-wrap">
<div class="left-floater">
One
</div>
<div class="left-floater">
Two
</div>
<div class="left-floater">
Three
</div>
<div class="left-floater">
I should be to the <s>left</s> right of "Three"
</div>
<div class="left-floater">
I float.
</div>
<div class="left-floater">
I float.
</div>
<div class="left-floater">
I float.
</div>
<div class="left-floater">
I float.
</div>
</div>
</div>
CSS non-wrapping floating divs
Use display: inline-block
instead of float
and give the container white-space: nowrap
.
div#sub > div#ranking {
position:relative;
top:42px;
left:7px;
width:722px;
height:125px;
overflow-x:auto;
overflow-y:hidden;
white-space: nowrap;
}
div#sub > div#ranking > div.player {
display: inline-block;
width:67px;
height:120px;
margin-left:5px;
background-color:#f3e1bb;
}
Here an example: http://jsfiddle.net/D5hUu/3/
CSS to stop text wrapping under image
Since this question is gaining lots of views and this was the accepted answer, I felt the need to add the following disclaimer:
This answer was specific to the OP's question (Which had the width set in the examples). While it works, it requires you to have a width on each of the elements, the image and the paragraph. Unless that is your requirement, I recommend using Joe Conlin's solution which is posted as another answer on this question.
The span
element is an inline element, you can't change its width in CSS.
You can add the following CSS to your span so you will be able to change its width.
display: block;
Another way, which usually makes more sense, is to use a <p>
element as a parent for your <span>
.
<li id="CN2787">
<img class="fav_star" src="images/fav.png">
<p>
<span>Text, text and more text</span>
</p>
</li>
Since <p>
is a block
element, you can set its width using CSS, without having to change anything.
But in both cases, since you have a block element now, you will need to float the image so that your text doesn't all go below your image.
li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}
P.S. Instead of float:left
on the image, you can also put float:right
on li p
but in that case, you will also need text-align:left
to realign the text correctly.
P.S.S. If you went ahead with the first solution of not adding a <p>
element, your CSS should look like so:
li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}
Related Topics
Aligning Elements Left and Center with Flexbox
Strip All HTML Tags Except Links
Font Awesome Is Not Showing Icon
How to Center-Align One Flex Item and Right-Align Another Using Flexbox
Making a Paragraph in HTML Contain a Text from a File
How to Write Equations in HTML
Rounded Corners in Outlook Without Images
Why Does CSS Padding Increase Size of Element
Apply CSS Style on All Elements Except with a Specific Id
Valid Content-Type for Xml, HTML and Xhtml Documents
Set Maxlength in HTML Textarea
Change Checkbox Check Image to Custom Image
Pure CSS Continuous Horizontal Text Scroll Without Break
HTML - How to Do a Confirmation Popup to a Submit Button and Then Send the Request
HTML Table Different Number of Columns in Different Rows
Percentage Height Not Working in Nested Flexbox Layout in Chrome