Text flowing in CSS

Question

Got problem with image nad text flowing. I have image, from the right side text, but if height of text div becomes more then image div height the is beeing written from the new line under the picture, i don't need that. How to create something like

My code:

HTML:

<div id="wrapper">
        <div id="content">
            <div id="image" class="fleft"><img src="img/image.png" alt="dart-face"/></div>
            <div id="text">
                <h1>Darth Vader</h1>
                <p>Darth Vader (born Anakin Skywalker) is a central character in the Star Wars saga,[1][2][3] appearing as one of the main antagonists of the original trilogy and as the main protagonist of the prequel trilogy.

                    <p>The character was created by George Lucas and numerous actors have portrayed him. His appearances span all six Star Wars films, and he is an important character in the expanded universe of television series, video games, novels, literature and comic books.</p>
                </p>
            </div>
        </div>
    </div>

CSS:

*{
    margin: 0;
    padding: 0;
}

body
{
    font: 12px Arial, Helvetica, sans-serif;
    background: url('../img/pattern.png');
}

#wrapper
{
    max-width: 80%;
    margin: 50px auto;


    -webkit-box-shadow: 0 5px 13px rgba(0,0,0,0.75);
    -moz-box-shadow: 0 5px 13px rgba(0,0,0,0.75);
    -o-box-shadow: 0 5px 13px rgba(0,0,0,0.75);
    -ms-box-shadow: 0 5px 13px rgba(0,0,0,0.75);
    box-shadow: 0 5px 13px rgba(0,0,0,0.75);


    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;

    background: -webkit-linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
    background: -moz-linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
    background: -o-linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
    background: -ms-linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
    background: linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
}

#content
{
    display: inline-block;
    /*position: relative;*/
}

#image
{
    margin: 34px;
}

#text
{
    /*position: absolute;*/
    line-height: 20px;
    text-align: left;
    margin: 34px 25px 25px 25px;
}

#text h1, #text p
{
    margin-bottom: 20px;
}

.fleft
{
    float: left;
}

.fright
{
    float: right;
}

Answer 1

Set overflow:hidden to #test to trigger its layout so it sees and stands away from floatting element around it and keep his inside .

#text {
    overflow:hidden;/* triggers layout , so it cares about inside and outside floatting elements */
    line-height: 20px;
    text-align: left;
    margin: 34px 25px 25px 25px;/* you might need to reset these since it will bang against floatting image */
}

Answer 2

Can also try this...The following code will easily fix the issue. Here is updated HTML...Posting only updated part

<div id="content">
    <div id="image"><img src="img/image.png" alt="dart-face"/></div>
    <div id="text">
       <h1>Darth Vader</h1>
       <p>
          Darth Vader (born Anakin Skywalker) is a central character in the Star Wars saga,[1][2][3] appearing as one of the main antagonists of the original trilogy and as the main protagonist of the prequel trilogy.
          <p>
            The character was created by George Lucas and numerous actors have portrayed   him. His appearances span all six Star Wars films, and he is an important character in the expanded universe of television series, video games, novels, literature and comic books.    
          </p>
       </p>
    </div>
    <div style="clearfix">&nbsp;</div>
 </div>

Now we have to remove unwanted code from CSS

Please remove following code from your CSS (same one to posted in question)

#image
{
    margin: 34px;
}

#text
{
    /*position: absolute;*/
    line-height: 20px;
    text-align: left;
    margin: 34px 25px 25px 25px;
}

.fleft
{
    float: left;
}

.fright
{
    float: right;
}

Now simply add the following CSS

#image
{
    float: left;
    width:30%;   /*Choose width accordingly*/

}

#text
{
    float: left;
    width:60%;     /*Choose width accordingly*/
}
.clearfix 
{
    display:block;
    clear:both;
    content:''; 
}

try this hope this help....and if any query ? donot hesitate to comment THANKS