Jump to content

Layout Help Needed


Recommended Posts

First of all, hi! and congrats on great site and great forum! :)I have some problem with layout of my web application. The problem is with two column design using divs (using float property). My first column (left one) is work column, and the second one (right) is tool area. The problem is that I would like that my left column div (float: left) would be resizable depending on screen width, and the right one be fixed and aligned to the right end of the screen (float: right) (both columns have min-width set). But I can't figure out how to that (using divs, with tables it's easy but lame :) ). If i set width: 100% on my left column, the right one drops down the whole height of left div... And that creates the problem.I draw some pictures to help explain my problem:sit1.pngsit2.pngCan someone post some tips how to do that.Who solves problem gets free window cleaning from me (or carpets, take your pick) :)

Link to comment
Share on other sites

You have to take advantage that <div> elements already stretch to take as much width as possible:

  1. Put the code of the fixed width column before the variable one:
    <div id="right"> </div><div id="main"> </div>

  2. Set the default margins and padding of the <html> and <body> to zero:
    html,body { margin: 0; padding: 0; }

  3. Give the right column a width and float it to the right:
    #right {  background-color: #33CC33;  width: 260px;  float: right;}

  4. Give the main column a margin equal to the width of the other column:
    #main {  background-color: #993333;  margin-right: 260px;  min-width: 700px;}

All together it should look like this:CSS:

html,body { margin: 0; padding: 0; }#right {  background-color: #33CC33;  width: 260px;  float: right;}#main {  background-color: #993333;  margin-right: 260px;  min-width: 700px;}


<div id="right"> </div><div id="main"> </div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...