<html>

<style>
div {border-color:black;border-size:1;border-style:solid;}
*{margin:0px,0px,0px,0px;}
</style>

<body style="display:inline">

<div style="width:20%;height:30%;display:inline;"></div>
<div style="width:20%;height:30%;display:inline;"></div>


</body>

</html>

I was trying to make an effect like two boxex placed next to each other. But when I am trying to set size divs don't "listen" to me.
They are as big as big is text inside them. What have I done wrong ??
I am going to do something like tables with this so could you help me ?

Hello,

Try to replace the

"display: inline;" with "float: left"

in the style of both divs.

this should work fine

<html>
<head>
<style type='text/css'>
.cont { border:black 1px solid; width:100%;}
/*css two column table*/
.l2 { width:50%; float:left; padding:0 1%; }
.r2 { width:50%; float:right; padding:0 1%; border-left:black 1px solid; }
/*css 3 column table*/
.l3 { width:33%; float:left; padding:0 1%; border-right:black 1px solid;}
.r3 { width:33%; float:right; padding:0 1%; border-left:black 1px solid; }
.c3 { width:30%; padding:0 1%;}
</style>
</head>
<body>
<p> two column table</p>
<div class='cont'>
<p class='l2'>this text left</p>
<p class='r2'>this text right</p>
</div>
<div class='cont'>
<p class='l2'>this text left</p>
<p class='r2'>this text right</p>
</div>
<p> three column table</p>
<div class='cont'>
<p class='l3'>this text left</p>
<p class='r3'>this text right</p>
<p class='c3'>this text middle</p>
</div>
<div class='cont'>
<p class='l3'>this text left</p>
<p class='r3'>this text right</p>
<p class='c3'>this text middle</p>
</div>

4 5 6 column tables continue in a similar fashion, as do combinations of rows like colspan rowspan

Is here another easier option ?

for real tabular data a table is still accepted practice

Use inline-block or float. Inline can't help you.
Here is some code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tow Divs Next Each Other</title>
<style type="text/css">
div {
	background: #EEE;
	border: 1px solid gray;
	display: inline-block;
	height: 200px;
	width: 300px;
	max-width: 300px ! important;
	white-space: wrap;
	overflow: hidden
	} 
</style>
</head>
<body>
	<div>
		Content in first box.
	</div> 
	<div>
		Content in second box.
	</div>
</body>
</html>

It may help you.

But I want to do something like that:
1 2
Not like that
1
2

Hi Oneat,

This is what you want to do [-B-]

Basically heres what you want to do

.container_a {
width:400px;
height:400px;
float:left;
background:red
}

.container_b {
width:200px;
height:400px;
float:left;
background:blue
}
<div class="container_a">
      	<p>this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy</p>
      </div>
      <div class="container_b">
		<p>this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy</p>      	
      </div>

Sorted?

There is another little trick that works quite well if you plan to use one container as navigation.

.container_a {
width:400px;
float:left;
background:red
}

.container_b {
width:200px;
background: blue;
position:relative;
margin-left:400px  /* Use the width specified in container_a */
}

At last i have a problem with vertical-align

<html>




<head>

<style>
*{margin:0px 0px 0px 0px;}
div {float:left; }
div div{float: none;background-color:red;height:100%;width:100%; border:white solid 1px;}
div div div div{width:100%;height:15%;}

</style>

</head>

<body>

<div style="width:20%; float:left;text-align:center;">


<div  style="height:20%">
<img src="xa.jpg" id="obrazek" style="width:100%;height:100%;">
</div>


<div style="height:78%">
<div>



<div style="vertical-align: bottom">rozrywa</div>

<div>rozrywka</div>

<div>rozrywka</div>

<div>rozrywka</div>

<div>rozrywka</div>



</div>
</div>


</div>






<div style="width:80%; float:right;display:inline;">
<div  style="height:20%">
<div>
c
</div>
</div>


<div style="height:78%">
<div>
b
</div>
</div>
</div>


</body>
</html>


<script>
document.getElementById("obrazek").src="x.jpg";
</script>

Problem is with this:
<div style="vertical-align: bottom">rozrywa</div>

It doesn't work. What's up ?

The vertical-align only apply to inline element. You can use inline tags like span instead of div. Here is example:

span {
      vertical-align: top/middle/bottom/baseline/text-top
     }

See here, for more detail.