Stazh Posted July 30, 2009 Share Posted July 30, 2009 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:Can 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 More sharing options...
Ingolme Posted July 30, 2009 Share Posted July 30, 2009 You have to take advantage that <div> elements already stretch to take as much width as possible: Put the code of the fixed width column before the variable one:<div id="right"> </div><div id="main"> </div> Set the default margins and padding of the <html> and <body> to zero:html,body { margin: 0; padding: 0; } Give the right column a width and float it to the right:#right { background-color: #33CC33; width: 260px; float: right;} 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;} HTML: <div id="right"> </div><div id="main"> </div> Link to comment Share on other sites More sharing options...
Stazh Posted July 30, 2009 Author Share Posted July 30, 2009 Thank you! Solved all my problems! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.