Display 2 blocks besides each other in the main content in Drupal 7

Display 2 blocks besides each other in the main content


First Set the 2 blocks to display on the main content. Go to Structure->Blocks
Set the blocks to main content.

Now when you close the overlay. You will see 2 blocks on the main page.

Right click and view source. If your module has css file set you can change over there or you can change the css file in style.css of your theme.

Basically you now have to modify the css file to display to blocks besides each other rather than vertical position.

Right click and view source now find the id for your block and set the css as below.

#listtable, #td {
    border:1px solid black; width:200px
}
#tr.invisible td{border:0px;width:40px}

#breadcrumb {display: none;}

#deductible-custom-form{
float: right;
margin-top:75px;
display:block;
width: 200px;
position: relative;
}
#display-list{
/*border:0.5px solid black;
background-color:lightgrey;*/
height: auto;
position: 10;
width: 200px;
float: left;
}

#block-deductible-list{
/*border:0.5px solid black;
background-color:lightgrey;*/
display: block;
height: auto;
position: relative;
width: 200px;
float: left;
}

.region-content{
max-width:500px;
min-width:500px;
}

now you will also have to modify the region content to set the maximum and minimum region so that blocks dont fall over in vertical position.

In above I have set one block to float left and one to float right this sets my two blocks in same line.
float: right;