CODEWITHSUNDEEP
htmlcsscss-floatfloating
Herr Nentu'
Herr Nentu'

Reputation: 1506

CSS float-left prevent words to go on new line

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?

Upvotes: 0

Views: 1382

Answers (2)

cfnerd
cfnerd

Reputation: 3799

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

Upvotes: 1

Andriy
Andriy

Reputation: 1027

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;

Upvotes: 0

Related Questions