draggable/resizable 2 column layout?

Posted on 2009-02-17
Last Modified: 2013-11-19
I'm looking for advice on how to construct a web-page that will have the following behavior

aside from a header and a footer, the content portion of the page will be split into 2 columns
the left column will contain ~30 rows (1 hyperlink per row).
you click on a hyperlink and it makes an ajax call (trendy, I know...) and uses the results of the call to populate the right column.

this is pretty straightforward, but I'd like to be able to **click/drag** on the border between the 2 columns and resize them so that I can see more of the right-hand column when I want to (this would ultimately hide some of the contents of the left-hand column).

Is there a common/simple/straightforward/commonly accepted way of doing this?

x         d           x
x         r           x
x         a           x
x         g           x
x    div? g    div?   x
x    td?  a     td?   x
x         b           x
x         l           x
x         e           x
x                     x
x         b           x
x         o           x
x         r           x
x         d           x
x         e           x
x         r           x

Question by:pdanese
    LVL 30

    Accepted Solution

    You may be able to pull this off with HTML frames.  Is this what your looking for?  

    Author Comment

    i was hoping to avoid frames, but you're the only one who has answered.  thanks for the response!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Java/J2EE and SOA

    This course will cover both core and advanced Java concepts like Database connectivity, Threads, Exception Handling, Collections, JSP, Servlets, XMLHandling, and more. You'll also learn various Java frameworks like Hibernate and Spring.

    Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now