How to write contents outside of table - css

Question

I want to create a table in my wordpress website. i want to place the table in the right side. The problem is, if i want to write contents outsides like to left side of the table then how will i do it. Can you please give me an example?
I am beginner in css so plz forgive me for the writing style.
I want to make a style for a website like (the pic i have attached). Can you Please help me that how can I write freely in the left side of the table?

Answer 1

Use position: absolute:
#navbar {
position: absolute; left: 0;
width: 20%;
}
#content {
position: absolute; right: 0; /*Presuming this is the table*/
}

Answer 2

You should take a look at the display property of css, this is mainly used for aligning content on webpages.
http://www.w3schools.com/cssref/pr_class_display.asp
You mean a table inside the content div?
#content {
margin-left:20%;
}
#navbar {
float: left;
width: 20%;
}
.table-wrapper {
display:inline-block;
}
<div id="layout">
<div id="header">Top Header</div>
<div id="navbar">Navigation</div>
<div id="content">
<div class="table-wrapper">
<table><tr><td>table 1</td></tr></table>
</div>
<div class="table-wrapper">
<table><tr><td>table 2</td></tr></table>
</div>
</div>
<div id="footer">Bottom Footer</div>
</div>
http://jsfiddle.net/KhH42/1/

Answer 3

Something like this?
#wrapper {
border:solid 2px #000;
margin:20px;
}
#wrapper div[class*="col-"]{
float:left;
}
.col-1 { width:30%; background:#eee; }
.col-2 { width:30%; background:#e2e2e2; }
.col-3 { width:40%; background:#ccc; }
#wrapper:after { content:""; clear:both; display:block; }
<div id="wrapper">
<div class="col-1">
<p>col 1 content</p>
</div>
<div class="col-2">
<p>col 2 content</p>
</div>
<div class="col-3">
<table>
<tr>
<td>
my table
</td>
</tr>
</table>
</div>
</div>
http://jsfiddle.net/3LUqg/