Two column div layout with fluid left and fixed right column

Question

I want to make a two column layout using DIVs  where right column will have a fixed width of 200px and the left one would take all the space that is left   It s quite easy  if you use tables    lt table width  100   gt     lt tr gt       lt td gt Column 1 lt  td gt       lt td width  200  gt Column 2  always 200px  lt  td gt     lt  tr gt   lt  table gt    But how about DIVs  Is it possible to accomplish this  If yes  then how

User · Answer

I was recently shown this website for liquid layouts using CSS. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts (Take a look at the demo pages in the links below).

The author now provides an example for fixed width layouts. Check out; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width.

This provides the following example(s), http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm (for two column layout like you are after I think)

http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm (for three column layout).

Sorry for so many links to this guys site, but I think it is an AWESOME resource.

User · Answer

Here s a solution  and it has some quirks  but let me know if you notice them and that they re a concern     lt div gt       lt div style  width 200px float left display inline-block   gt          Hello world      lt  div gt       lt div style  margin-left 200px   gt          Hello world      lt  div gt   lt  div gt

User · Answer

CSS    sidebar  float  right  width  200px  background   eee    content  overflow  hidden  background   dad     HTML       lt div id  sidebar  gt I m 200px wide lt  div gt   lt div id  content  gt  I take up the remaining space  lt br gt  and I don t wrap under the right column lt  div gt    The above should work  you can put that code in wrapper if you want the give it width and center it too  overflow hidden on the column without a width is the key to getting it to contain  vertically  as in not wrap around the side columns  can be left or right    IE6 might need zoom 1 set on the  content div too if you need it s support

User · Answer

x000D   x000D   wrapper   x000D    margin-right  50   x000D    x000D   content   x000D    float  left  x000D    width  50   x000D    background-color   CCF  x000D    x000D   sidebar   x000D    float  right  x000D    width  200px  x000D    margin-right  -200px  x000D    background-color   FFA  x000D    x000D   cleared   x000D    clear  both  x000D    x000D   lt div id  wrapper  gt  x000D     lt div id  content  gt Column 1  fluid  lt  div gt  x000D     lt div id  sidebar  gt Column 2  fixed  lt  div gt  x000D     lt div id  cleared  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I think this is a simple answer   this will split child devs 50  each based on the parent width      lt div style  width  100   gt           lt div style  width  50   float  left  display  inline-block   gt              Hello world          lt  div gt           lt div style  width  50   display  inline-block   gt              Hello world          lt  div gt       lt  div gt

User · Answer

CSS Solutuion   left      float right      width 200px      height 500px      background red         right      margin-right  200px      height 500px      background blue      Check working example at http   jsfiddle net NP4vb 3   jQuery Solution  var parentw       parent   width    var rightw       right   width        left   width parentw - rightw     Check working example http   jsfiddle net NP4vb

User · Answer

The following examples are source ordered i e  column 1 appears before column 2 in the HTML source  Whether a column appears on left or right is controlled by CSS   Fixed Right   x000D   x000D   wrapper   x000D    margin-right  200px  x000D    x000D   content   x000D    float  left  x000D    width  100   x000D    background-color   CCF  x000D    x000D   sidebar   x000D    float  right  x000D    width  200px  x000D    margin-right  -200px  x000D    background-color   FFA  x000D    x000D   cleared   x000D    clear  both  x000D    x000D   lt div id  wrapper  gt  x000D     lt div id  content  gt Column 1  fluid  lt  div gt  x000D     lt div id  sidebar  gt Column 2  fixed  lt  div gt  x000D     lt div id  cleared  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Fixed Left   x000D   x000D   wrapper   x000D    margin-left  200px  x000D    x000D   content   x000D    float  right  x000D    width  100   x000D    background-color   CCF  x000D    x000D   sidebar   x000D    float  left  x000D    width  200px  x000D    margin-left  -200px  x000D    background-color   FFA  x000D    x000D   cleared   x000D    clear  both  x000D    x000D   lt div id  wrapper  gt  x000D     lt div id  content  gt Column 1  fluid  lt  div gt  x000D     lt div id  sidebar  gt Column 2  fixed  lt  div gt  x000D     lt div id  cleared  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Alternate solution is to use display  table-cell  which results in equal height columns

[html] Two column div layout with fluid left and fixed right column

Examples related to html

Examples related to css

Examples related to fluid-layout