Text flowing in CSS

Vote count:

0

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;
}

asked 35 secs ago

vladja

20