0

enter image description here

I want to divide the web page area like the pic shown. I have tried this approach. To some extent it is right. Would appreciate to clear my doubts.

<div class="row">
   <div class="col-md-8">
       <div class="well">
           <div class="row">
               <div class="col-md-12"><div class="well">canvas</div></div>
           </div>
           <div class="row">
               <div class="col-md-8"><div class="well">edit text</div></div>
               <div class="col-md-4"><div class="well">Button</div></div>
           </div>
       </div>
   </div>
   <div class="col-md-4"><div class="well" >Control panel</div></div>
</div>
jsalonen
  • 29,593
  • 15
  • 91
  • 109
Koushik Saha
  • 673
  • 1
  • 10
  • 25

2 Answers2

1

Try out this one.. it will work fine...

<div class="row">
<div class="col-md-8">
    <div class="well">

        <div class="row">
            <div class="col-md-12"><div class="well">canvas</div></div>
        </div>

        <div class="row">
                <div class="col-md-8"><div class="well">edit text</div></div>
                <div class="col-md-4"><div class="well">Button</div></div>
        </div>
    </div>   
</div>
<div class="col-md-4"><div class="well">Control panel</div></div></div>
Ankit Balyan
  • 1,319
  • 19
  • 31
1

This is what I tried in jsfiddle and is working for me (without the well class)

<div class="container">
    <div class="row">
         <div class="col-xs-8">
             <div class="row">
                 <div class="col-xs-12">
                      Canvas
                 </div>
             </div>
             <div class="row">
                 <div class="col-xs-8">Edit Text</div>
                 <div class="col-xs-4">Button</div>
             </div>
         </div>
         <div class="col-xs-4">Control panel</div>
    </div>
</div>

http://jsfiddle.net/aJ9ne/

pankaj
  • 1,316
  • 3
  • 16
  • 27
  • well its the same way that i have written also. But do i adjust the height of the section called "Control Panel"? – Koushik Saha Jun 08 '14 at 06:21
  • See the update jsfiddle link. I have taken up the solution to adjust the height of "control panel" and make it same as that of left column from here - http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height – pankaj Jun 08 '14 at 08:53