CODEWITHSUNDEEP
htmlcss
UserX
UserX

Reputation: 1337

Trying to have my text always with same width, even when my div have more free space

I have a image and some text at right of my image.

And I have a lot of text, so my text exceeds the height of the image, and then my text is going to left of my image.

But I want that when my text exceeds the height of image, I want that my text continues with same width and align like when my text not exceeds my image height.

To explain better, I want this:

enter image description here

And not this: enter image description here

But this second image is what Im having, do you know how I can solve this?

My fiddle to demonstrate what Im having: http://jsfiddle.net/43JN5/2/

This is my html:

<div>
    <h3>Title of my first post!</h3>    
    <div id="teste">
        <img class="img" style="width:170px;height:170px; float:left;" src="" />
        <p style="background:#fff;">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem .
            <br />They are good for:<br />
            -Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br />
            -Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br />
            -Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

    </div>

And my css:

#teste
{   
    text-align:center;
    margin:0 auto 0 auto;
    background:#fff;
}

#teste .img
{
    width:200px;
    height:220px; 
    float:left;
    margin-right:10px;
    border:5px solid red;
    margin-top:15px;

}

#teste p
{
    font-size: 17px;  
    text-align:justify;
    line-height:25px;
    word-spacing:-2px;
    width:100%;
    margin-top:15px;
    min-height:240px;
}

Upvotes: 0

Views: 40

Answers (1)

j08691
j08691

Reputation: 207913

One way is to apply display:table-cell; and vertical-align:top; to the image and text.

jsFiddle example

Upvotes: 2

Related Questions