CODEWITHSUNDEEP
jqueryhtmlcssiframe
irm
irm

Reputation: 4331

how to split browser window

I'm working on an web base application and I need to split the browser window vertically. The right column will be html/css and content part of the application while the left column will be displaying another website and it will use most of the space. I believe I can do this with an iframe but I wonder if there is a different approach I can give to it.

The left column, part of the application, will be optional as so if the user chose to they can disable it and the external website/iframe should occupy the entire window width then.

I need to have two vertical scroll bars for the two columns and the left column shouldn't overlap the other.

If someone can point me on the right direction I will greatly appreciated.

Thank you.

Upvotes: 0

Views: 1790

Answers (2)

Frank
Frank

Reputation: 28

Check this out. Could be a possible solution but I personally think iframe is the way to go.

http://camendesign.com/code/splitscreen

Upvotes: 0

fmodos
fmodos

Reputation: 4568

You can split the window using divs, and by hiding one div the other one will use the space. Check this code example:

<button onclick="document.getElementById('leftArea').style.display='none'">Hide Left Area</button>

          <div style="width:100%; height:100%">
              <div id="leftArea" style="float:left;width:50%;background-color:#FF0000">
                  Left Area - iframe below:<br/>
                  <iframe src="" width="100%" height="100%"> </iframe>
              </div>
              <div style="width:100%; background-color:#0000FF">
                 Right Area
              </div>
          </div>

Upvotes: 1

Related Questions