Тема: Обтікання тексту текстом

В мене виникла проблема при спробі розмістити текст який має обтікати текстом, в тексті по ліву сторону йдуть пропуски поки не закінчиться текст з правої сторони. Як це виправити ? я ще скинув картинку як я хочу зробить, і текст з права виділений лише тимчасово червоним полем щоб було більш зрозуміло де чиї поля 
html

<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css\stil.css">
<title>Магазин мебилів</title>
</head>
<p class='fig'>
<img src='img\mebli.jpg' width='70%' height='80%'>
</p>

<p class='infa'>
Наша компанія створює містку, зручну і комфортну корпусні меблі на замовлення у Львові використовуючи тільки високоякісні матеріали і фурнітуру.

Ми надаємо повну інформацію про всілякі матеріали, фурнітуру, колірних спектрах і малюнках фасадів, дзеркал і маємо в своєму розпорядженні величезною базою фотоматеріалів готових меблевих рішень. Завдяки цьому, Ви можете підібрати найбільш відповідну саме Вам меблеву композицію, а наше завдання - втілити її в життя.

Ми можемо створити меблі Вашим ескізами, кресленнями, фотографій з журналів або сайтів, за простим замальовками або ж може опрацювати разом з Вами кілька варіантів меблів з яких Ви можете вибрати найбільш вподобану.
</p>

<p class='main_top'>
Столи
</p>
<p class='main'>
Стільці
</p>
<p class='main'>
Шафи
</p>
<p class='main'>
Тумбочки
</p>
<p class='main'>
Дівани
</p>
<p class='main_bottom'>
Кроваті
</p>
<!p class='virivn'>
<!img src='img\komputerni_stoli.jpg' width='28%' height='50%'>
<!/p>
<body>
</body>
</html>

css

.fig 
{
    text-align: center;
}
.virivn
{
    margin-left:10%;
}

.main_top
{
    background: #61C6BC;
    font-size: 36px;
    border-top: 2px solid #F456E7;
    border-left: 2px solid #F456E7;
    border-right: 2px solid #F456E7;
    margin-right: 50%;
    margin-left: 15%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding:  1%;
}

.main_bottom
{
    background: #61C6BC;
    font-size: 36px;
    border-bottom: 2px solid #F456E7;
    border-left: 2px solid #F456E7;
    border-right: 2px solid #F456E7;
    margin-right: 50%;
    margin-left: 15%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding:  1%;
}

.main
{
    background: #61C6BC;
    font-size: 36px;
    border-left: 2px solid #F456E7;
    border-right: 2px solid #F456E7;
    margin-right: 50%;
    margin-left: 15%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding:  1%;
}

.infa
{
    margin-left: 51%;
    margin-right: 15%;
    margin-top: 0%;
    float: right;
    border: 2px solid red;
    font-size: 24px;
}
Post's attachments

сайт.png 8.37 kb, 214 downloads since 2014-10-30 

2

Re: Обтікання тексту текстом

нічого складного тримай

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="row">
            <img src="top_img.jpg" height="320" width="960" alt="">
            <div class="sidebarmenu">
                <nav>
                    <ul>
                        <li>
                            <a href="#">Lorem ipsum.</a>
                            <a href="#">Lorem ipsum.</a>
                            <a href="#">Lorem ipsum.</a>
                            <a href="#">Lorem ipsum.</a>
                            <a href="#">Lorem ipsum.</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <p> Наша компанія створює містку, зручну і комфортну корпусні меблі на замовлення у Львові використовуючи тільки високоякісні матеріали і фурнітуру.</p>
            <p>Ми надаємо повну інформацію про всілякі матеріали, фурнітуру, колірних спектрах і малюнках фасадів, дзеркал і маємо в своєму розпорядженні величезною базою фотоматеріалів готових меблевих рішень. Завдяки цьому, Ви можете підібрати найбільш відповідну саме Вам меблеву композицію, а наше завдання - втілити її в життя.</p>
            <p> Ми можемо створити меблі Вашим ескізами, кресленнями, фотографій з журналів або сайтів, за простим замальовками або ж може     опрацювати разом з Вами кілька варіантів меблів з яких Ви можете вибрати найбільш вподобану.</p>
            <div class="autor">
                autor post autor post autor post
            </div>
        </div>
    </body>
</html>

і стилі незабудь підключити  :)

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
    display: block;
}
nav ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote: :before, blockquote: :after, q: :before, q: :after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}
input, select {
    vertical-align: middle;
}
.row{
    width: 98%;
    max-width: 960px;
    margin: 0 auto;
}
.sidebarmenu{
    float: left;
    width: 40%;
    border: 1px solid #303030;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
    min-height: 30px;
    margin: 0 10px 10px 0;
}
.sidebarmenu li{
    float: left;
    list-style: none;
}
.sidebarmenu li a{
     color: #333;
    display: block;
    font-size: 14px;
    line-height: 16px;
    text-decoration: none;
}
.row p{
    font: 400px 24px/28px sans-serif;
    color:#0303;
    padding-bottom: 10px;
}
.autor{
    float: left;
    width: 100%;
    border: 3px solid red;
    text-align: center;
    padding: 10px 0
}

*DRINK*

Подякували: Betterthanyou, leofun012

3

Re: Обтікання тексту текстом

Key Дуже дякую *DRINK*