How to arrange a paragraph over another? - html

Question

I want to arrange the text of this site as well as in the picture below
http://i60.tinypic.com/aufae0.jpg
This is my site:
http://avocat.dac-proiect.ro/wp/?page_id=14
This is code 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>
This code 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/
The JS editor I managed to arrange text as they wish but I try to make changes on the site looks very ugly ...
Can you help me solve this problem please?
Thanks in advance!

Answer 1

You may solve your problem by simply removing width and float like this:
#text3{
font-size: 17px;
padding: 87px 45px 45px 20px;
padding-left:50px;
}

Answer 2

Have you considered using affix from bootstrap to fix your text to the top?

Answer 3

Right know i write from my mobilephone so I can't test code but here are some ideas:
Use a table with 2 columns and split the text in 2.
<table>
<tr>
<td> first text part </td>
<td> second text part </td>
</tr>
</table>
Table has many elements to set size, position, color, background.
You could also use 2 divs to make the same look

Answer 4

I would put the text into a container. This is centered and a max width of 1200 or whatever you think looks good.
.container {
margin: 0 auto;
max-width: 1200px;
}
Use box-sizing so the border doesn't effect the dimension
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Clearfloat after the div
.grid:after {
/* Or #extend clearfix */
content: "";
display: table;
clear: both;
}
Float all divs and add 0 padding to last column
[class*='col-'] {
float: left;
padding-right: 20px;
}
.grid [class*='col-']:last-of-type {
padding-right: 0;
}
Column width
.col-1-2 {
width: 50%;
}
The 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>
I would also edit the list to not use < br >'s and start using lists.
Working jsfiddle http://jsfiddle.net/0dLeqg9s/2/
You can read more about it http://css-tricks.com/dont-overthink-it-grids/