How do I HTML or any code to seperate website layout?

I hope you get what I mean.

Currently, what I have is


I'd like to change it to


I was told that you could use DIV codes. Any idea how?

Any help would be greatly appreciated

 

<div style="float:left; width:25%;">
Sidebar contents
</div>

<div style="float:left; width:70%;">
main contents
</div>

<br style="clear:both;" />

 

Wow, thanks alot YIAM. Reps + for you.

BTW, how can I "push" the sidebar further up?

 

have a study of wordpress theme and the code of any wordpress . There are many two column div themes.

The key of two div column is set width of both right div and left div. then set the right div float right; set the left div float left.

 

Here is what I use mate:

Create your divs first:

<div id="maindiv">

<div class="divleft">SIDEBAR</div>

<div class="divright">MAIN BODY</div>

</div>

Code (markup):

Than control these divs using CSS like:

#maindiv {
    width: 800px;
    margin: 0px auto 0px;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    }


.divleft {
    width: 200px;
    float: left;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    }

.divright {
    width: 600px;
    float: right;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    }

Code (markup):

That's the simplest way I can explain this to you so I hope you get the idea.

Shouldn't be any need to use:

<div style="clear:both;"></div>

Code (markup):