Simple Two Column HTML Layout Without Using Tables

* {  margin: 0;}article {  margin: 0 auto;  width: 600px;  background: #FFF;  padding: 10px;}
/*clear the float at the end of the lyrics*/article:after {  content: '';  display: block;  clear: left;}h1 {  font-size: 1em;  margin: 0 0 20px;  margin-left: 100px;  /*Same as h2 width*/}h2,p {  float: left;  font-size: 1em;  font-weight: normal;}h2 {  clear: left;  /*Move to new line*/  width: 100px;}p {  margin: 0 0 20px;  white-space: pre;}
/*if there is more than one paragraph after an h2, clear it and give it a margin the same size as the h2 width */p + p {  margin-left: 100px;  clear: left;}

<article id="lyrics">    <h1> Wild And Untamed Thing </h1>      <h2>Frank:</h2>      <p>My my myMy my my my myMy my my myMy myI'm a wild and an untamed thingI'm a bee with a deadly stingYou get a hit and your mind goes pingYour heart'll pump and your blood will singSo let the party and the sounds rock onWe're gonna shake it 'till the life has goneRose tint my worldKeep me safe from my trouble and pain</p>

    <h2>Chorus:</h2>    <p>We're a wild and an untamed thingWe're a bee with a deadly stingYou get a hit and your mind goes pingYour heart'll pump and your blood will singSo let the party and the sounds rock onWe're gonna shake it 'till the life has goneRose tint my worldKeep me safe from my trouble and pain</p>
    <p>We're a wild and an untamed thingWe're a bee with a deadly stingYou get a hit and your mind goes pingYour heart'll pump and your blood will singSo let the party and the sounds rock onWe're gonna shake it 'till the life has gone, gone, goneRose tint my worldKeep me safe from my trouble and pain</p>

    <h2>Riff Raff:</h2>     <p>Frank-N-Furter, it's all overYour mission is a failureYour lifestyle's too extremeI'm your new commanderYou now are my prisonerWe return to TransylvaniaPrepare the transit beam</p></article>

How do you create a two-column layout without html tables?

Until we have flexbox layout I would use absolute positioning:

Html:

<div id="container">
    <div id="left">left one</div>
    <div id="right">right one</div>
</div>

CSS:

#container {
    position: relative;
    height: 150px;
}

#left, #right {
    position: absolute;
    top: 0px; 
    bottom: 0px;
}

#left {
    left: 0px; 
    width: 300px;
    background: red;
}

#right {
    left: 300px; 
    right: 0px;    
    background: green;
}

jsfiddle

There are alternatives if you want the layout to adapt to the content instead of the container. If your right column has more content you could use:

#container {
    position: relative;
}

#left {
    position: absolute;
    left: 0px; 
    width: 300px;
    top: 0px; bottom: 0px;
    background: red;
}

#right {
    margin-left : 300px; 
    background: green;
}

jsfiddle

If your left column has more content, use:

#container {
    position: relative;
}

#left {
    width: 300px;
    background: red;
}

#right {
    position: absolute;
    left: 300px; 
    right: 0px;
    top: 0px; bottom: 0px;
    background: green;
}

jsfiddle

Can you do this HTML layout without using tables?

There is nothing wrong with using the tools that are available to you to do the job quickly and correctly.

In this case a table worked perfectly.

I personally would have used a table for this.

I think nested tables should be avoided, things can get messy.

Two column layout in CSS without using tables

I started out with @graup's solution, and altered it as it wasn't working w/ wrapped text.

Here is the CSS I ultimately went with:

.section
{
    width:800px;
    overflow: hidden;
}
.section label
{
    display:block;
    width:400px;
    float:left;
}

.section span
{
    width:400px;
    display: inline-block;
}

How can I lay out three divs in two columns without using tables?

This should work

<div style="width:100%">
<div id="topLeft" style="float:left; width:50%; height:200px">
</div>
<div id=topRight style="float:right; width:50%; height:400px">
</div>
<div id="bottomLeft" style="float:left; width:50%; width:200px">
</div>
</div>

How can i design two column form layout without using tables

Instead of wrapping each item in a div, wrap the items you want to keep together:

{% for field in form %}
    <div>{{ LABEL }}{{ INPUT FIELD }}</div>

Then in your CSS do something like this:

form { width: 800px; /* or whatever */ }
form > div { display: inline-block; width: 50%; }
label, input { display: block; }

You may need to adjust the widths to account for padding, margins etc. The form fields will flow right to left and down the page in two columns.

i want to create multiple column into two column layout without using flex and grid

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<style type="text/css">
    *{
        outline: none;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .area{
        width: 100%;
        height: auto;
    }
    .container{
        max-width: 260px;
        padding-top: 1rem;
        margin: 0 auto;
    }
    .box{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: lightgreen;
    }
</style>
<body>
    <div class="area">
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
        </div>
        <div class="container">
            <div class="box">3</div>
            <div class="box">4</div>
        </div>
        <div class="container">
            <div class="box">5</div>
            <div class="box">6</div>
        </div>
    </div>
</body>
</html>

<div id="left" style="float: left; width: 60%;">
    /* content goes here... */
</div>