CSS float-left prevent words to go on new line

Question

I have the following code:

html

<div class="container">
    <div class="float-left">
        <a href="#"><img width="550" src="image.jpg" alt="" /></a>
    </div>
    <div class="float-left">
        <h1 class="new">Some long text here that should word wrap</h1>
    </div>
    <div class="clear"></div>
<div>

css

.container{
    width:960px;
}
.float-left {
    float:left
}
.clear{
    clear:both;
}
h1.new{
    font-family: RockwellMT-Light;
    font-size: 28px;
    line-height: 31px;
}

I want the divs to act like 2 columns One will be the image and the second one should be text that can go down as much as it takes. Since float left does not have a fixed width the problem is that the whole element h1 is jumping on the new line and the text does not goes on the next line. I don't want to give fixed widths to the floating divs.

How can I prevent this?

It sounds more like you want to float the `
something
` from within the `
` so that the `h1` can be full width but wrap around the floated something div? — JohnDevelops, May 07 '15 at 13:09

cfnerd · Accepted Answer · 2015-05-07T15:12:48.747

1

You could remove class="float-left" from the second <div> and it would work.

edited May 07 '15 at 15:12

answered May 07 '15 at 13:38

cfnerd

3,658
12
32
44

score 0 · Answer 2 · answered May 07 '15 at 13:07

you can try smth like this:

<div class="container">
    <div class="something">something</div>
    <div class="nextthing float-left">
        <h1 class="new">Some long text here that should word wrap</h1>
    </div>
    <div class="clear"></div>
<div>


.container {
 position: relative;
}
.something {
 position: absolute;
}
.nextthing {
 text-indent: size_of_.something;
}

Or change float:left, to display:inline-block;

CSS float-left prevent words to go on new line

2 Answers2