Как организовать абзац над другим?

Question

Я хочу организовать текст этого сайта, а также на картинке ниже

http://i60.tinypic.com/aufae0.jpg 

Это мой сайт:

http://avocat.dac-proiect.ro/wp/?page_id=14

Это код HTML:

<p id="text3"> 
    Am reprezentat şi am acordat consultanţă juridică pentru clienţi 

persoane fizice române şi străine, instituţii publice, persoane juridice 

române şi străine în următoarele domenii: 
</p> 

<br><br> 

<p id="text4"> 

- agricultură, exploatări agricole, prelucrarea şi comercializarea 

produselor agricole; 
<br> 
- comerţ cu produse alimentare; 
<br> 
- imobiliar; 
<br> 
- distribuţie de carburanţi; 
<br> 
- transporturi; 
<br> 
- asigurări; 
<br> 
- producţie şi comercializare utilaje grele; 
<br> 
- producţie structuri metalice; 
<br> 
- producţie automatizări; 
<br> 
- servicii de proiectare; 
<br> 
- comercializare automatizări; 
<br> 
- jocuri de noroc; 
<br> 
- turism, hoteluri şi pensiuni; 
<br> 
- medical; 
<br> 
- construcţii civile şi industriale; 
<br> 
- comercializare utilaje şi autovehicule, service auto; 
<br> 
- producţie software, administrarea site-urilor; 
<br> 
- comerţ; 
<br> 
- bursier, societăţi listate, investitori, fonduri de investiţii. 
<br> 
- asistenţă şi îngrijire copii şi vârstnici; 
<br> 
- exploatări forestiere şi prelucrarea lemnului; 
<br> 
- exploatări agricole; 
<br> 
- extracţia şi prelucrarea minereurilor; 
<br> 
- producţia şi comercializarea materialelor de construcţii; 
<br> 
- instituţii publice; 
<br> 
- instituţii religioase.</p> 

Этот код CSS:

#text3{ 
    font-size: 17px; 
    width:20%; 
    float:left; 
    padding: 87px 45px 45px 20px; 
    padding-left:50px; 

} 


#text4{ 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
    -moz-column-count: 2; /* Firefox */ 
    column-count: 2; 
    font-size:17px; 
    padding-top: 50px; 
    padding-left: 20px; 
} 

http://jsfiddle.net/s0bsfdu4/10/

редактор JS мне удалось организовать текст, как они хотят, но я стараюсь, чтобы сделать изменения на сайте выглядит очень некрасиво ...

Можете ли вы помочь мне решить эту проблему, пожалуйста?

Заранее благодарен!

Answer 1

Вы можете решить вашу проблему, просто удалив width и float вроде этого:

#text3{ 
    font-size: 17px; 
    padding: 87px 45px 45px 20px; 
    padding-left:50px; 
} 

Answer 2

Рассматривали ли вы с помощью affix от начальной загрузки, чтобы исправить текст в верхней части?

Answer 3

Право знать я пишу от своего мобильного телефона, так что я не могу проверить код, но вот некоторые идеи:

использовать таблицу с 2 столбцами и разделить текст в 2.

<table> 
<tr> 
    <td> first text part </td> 
    <td> second text part </td> 
</tr> 
</table> 

Таблица имеет многие элементы задают размер, положение, цвет, фон.

Вы также можете использовать 2 дивы, чтобы сделать то же самое выглядеть

Answer 4

Я бы поместить текст в контейнер. Это центрируется и максимальная ширина 1200 или все, что вы считаете хорошим.

.container { 
    margin: 0 auto; 
    max-width: 1200px; 
} 

Использование коробчатого проклейки поэтому граница не влияет на размер

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Clearfloat после DIV

.grid:after { 
    /* Or @extend clearfix */ 
    content: ""; 
    display: table; 
    clear: both; 
} 

Поплавок все дивы и добавить 0 отступы в последней колонке

[class*='col-'] { 
    float: left; 
    padding-right: 20px; 
} 
.grid [class*='col-']:last-of-type { 
    padding-right: 0; 
} 

Ширина колонок

.col-1-2 { 
    width: 50%; 
} 

HTML-

<div class="container"> 
<p>Am reprezentat şi am acordat consultanţă juridică pentru clienţi persoane fizice române şi străine, instituţii publice, persoane juridice române şi străine în următoarele domenii:</p> 

<div class="grid"> 
    <div class="col-1-2"> 
    <div class="module"> 
      <h3>1/2</h3> 
    </div> 
    </div> 
    <div class="col-1-2"> 
    <div class="module"> 
      <h3>1/2</h3> 
    </div> 
    </div> 
</div> 
</div> 

Я хотел бы также изменить список, чтобы не использовать < бр> 's и начать использовать списки.

Работа jsfiddle http://jsfiddle.net/0dLeqg9s/2/

Вы можете прочитать больше об этом http://css-tricks.com/dont-overthink-it-grids/