2 column div layout right column with fixed width left fluid

Question

My requirement is simple  2 columns where the right one has a fixed size  Unfortunately I couldn t find a working solution  neither on stackoverflow nor in Google  Each solution described there fails if I implement in my own context  The current solution is   div container       position  fixed      float  left      top  100px      width  100       clear  both      content       margin-right  265px      right       float  right      width  225px      margin-left  -225px      right   content       height  1      fixed for IE  although doesn t seem to work        padding  20px       lt div class  container  gt       lt div id  content  gt          fooburg content      lt  div gt       lt div id  right  gt          test right      lt  div gt   lt  div gt    I get the following with above code    ----------------------- -------    fooburg content                  -------------------------------                       test right     ----------------------- -------    Please advise  Many thanks

User · Answer

I d like to suggest a yet-unmentioned solution  use CSS3 s calc   to mix   and px units  calc   has excellent support nowadays  and it allows for fast construction of quite complex layouts   Here s a JSFiddle link for the code below    HTML    lt div class  sidebar  gt    sidebar fixed width  lt  div gt   lt div class  content  gt    content flexible width  lt  div gt    CSS    sidebar       width  180px      float  right      background  green      content       width  calc 100  - 180px       background  orange      And here s another JSFiddle demonstrating this concept applied to a more complex layout  I used SCSS here since its variables allow for flexible and self-descriptive code  but the layout can be easily re-created in pure CSS if having  hard-coded  values is not an issue

User · Answer

Remove the float on the left column   At the HTML code  the right column needs to come before the left one   If the right has a float  and a width   and if the left column doesn t have a width and no float  it will be flexible     Also apply an overflow  hidden and some height  can be auto  to the outer div  so that it surrounds both inner divs   Finally  at the left column  add a width  auto and overflow  hidden  this makes the left column independent from the right one  for example  if you resized the browser window  and the right column touched the left one  without these properties  the left column would run arround the right one  with this properties it remains in its space    Example HTML    lt div class  container  gt       lt div class  right  gt          right content fixed width      lt  div gt       lt div class  left  gt          left content flexible width      lt  div gt   lt  div gt    CSS    container      height  auto     overflow  hidden      right       width  180px      float  right      background   aafed6      left       float  none     not needed  just for clarification        background   e8f6fe         the next props are meant to keep this block independent from the other floated one        width  auto      overflow  hidden        Example here  http   jsfiddle net jackJoe fxWg7

User · Answer

See http   www alistapart com articles negativemargins    this is exactly what you need  example 4 there     lt div id  container  gt       lt div id  content  gt           lt h1 gt content lt  h1 gt           lt p gt Lorem ipsum dolor sit amet  consectetuer adipiscing elit   Phasellus varius eleifend tellus  Suspendisse potenti  Class aptent taciti sociosqu ad litora torquent per conubia nostra  per inceptos hymenaeos  Nulla facilisi  Sed wisi lectus  placerat nec  mollis quis  posuere eget  arcu  lt  p gt           lt p class  last  gt Donec euismod  Praesent mauris mi  adipiscing non  mollis eget  adipiscing ac  erat  Integer nonummy mauris sit amet metus  In adipiscing  ligula ultrices dictum vehicula  eros turpis lacinia libero  sed aliquet urna diam sed tellus  Etiam semper sapien eget metus  lt  p gt       lt  div gt   lt  div gt    lt div id  sidebar  gt       lt h1 gt sidebar lt  h1 gt       lt ul gt           lt li gt link one lt  li gt           lt li gt link two lt  li gt       lt  ul gt   lt  div gt       container       width  100       background   f1f2ea url background gif  repeat-y right      float  left      margin-right  -200px     content       background   f1f2ea      margin-right  200px     sidebar       width  200px      float  right

User · Answer

Best to avoid placing the right column before the left  simply use a negative right-margin   And be  responsive  by including an  media setting so the right column falls under the left on narrow screens    lt div style  background   f1f2ea   gt     lt div id  container  gt       lt div id  content  gt           lt strong gt Column 1 - content lt  strong gt       lt  div gt     lt  div gt     lt div id  sidebar  gt       lt strong gt Column 2 - sidebar lt  strong gt     lt  div gt   lt div style  clear both  gt  lt  div gt       lt style type  text css  gt   container       margin-right  -300px      float left      width 100      content       margin-right  320px     20px added for center margin       sidebar       width 300px      float left    media  max-width  480px         container           margin-right 0px          margin-bottom 20px             content           margin-right 0px          width 100              sidebar           clear left           lt  style gt

User · Answer

Hey  What you can do is apply a fixed width to both the containers and then use another div class where clear both  like   div left    width  600px  float  left     div right    width  240px  float  right      div clear    clear both       place a the clear div under left and right container

User · Answer

I have simplified it   I have edited jackjoe s answer  The height auto etc not required I think   CSS    container   position  relative  margin 0 auto  width  1000px  background   C63  padding  10px      leftCol   background   e8f6fe  width  auto      rightCol   float right  width 30   background   aafed6      box   position relative  clear both  background  F39      lt  style gt    HTML    lt div id  container  gt      lt div id  rightCol  gt       lt p gt Lorem ipsum dolor sit amet consectetuer adipiscing elit  Phasellus varius eleifend  Lorem ipsum dolor sit amet  consectetuer adipiscing elit Phasellus varius eleifend  lt  p gt      lt p gt Lorem ipsum dolor sit amet consectetuer adipiscing elit  Phasellus varius eleifend  Lorem ipsum dolor sit amet  consectetuer adipiscing elit Phasellus varius eleifend  lt  p gt    lt  div gt     lt div id  leftCol  gt       lt p gt Lorem ipsum dolor sit amet consectetuer adipiscing elit  Phasellus varius eleifend  Lorem ipsum dolor sit amet  consectetuer adipiscing elit Phasellus varius eleifend  lt  p gt      lt p gt Lorem ipsum dolor sit amet consectetuer adipiscing elit  Phasellus varius eleifend  Lorem ipsum dolor sit amet  consectetuer adipiscing elit Phasellus varius eleifend  lt  p gt     lt p gt Lorem ipsum dolor sit amet consectetuer adipiscing elit  Phasellus varius eleifend  Lorem ipsum dolor sit amet  consectetuer adipiscing elit Phasellus varius eleifend  lt  p gt    Lorem ipsum dolor sit amet consectetuer adipiscing elit  Phasellus varius eleifend  Lorem ipsum dolor sit amet  consectetuer adipiscing elit Phasellus varius eleifend    lt  div gt    lt  div gt    lt div class  box  gt     lt p gt Lorem ipsum dolor sit amet consectetuer adipiscing elit  Phasellus varius eleifend  Lorem ipsum dolor sit amet  consectetuer adipiscing elit Phasellus varius eleifend  lt  p gt      lt p gt Lorem ipsum dolor sit amet consectetuer adipiscing elit  Phasellus varius eleifend  Lorem ipsum dolor sit amet  consectetuer adipiscing elit Phasellus varius eleifend  lt  p gt     lt p gt Lorem ipsum dolor sit amet consectetuer adipiscing elit  Phasellus varius eleifend  Lorem ipsum dolor sit amet  consectetuer adipiscing elit Phasellus varius eleifend  lt  p gt   lt  div gt

User · Answer

Simplest and most flexible solution so far it to use table display   HTML  left div comes first  right div comes second     we read and write left to right  so it won t make any sense to place the divs right to left   lt div class  container  gt       lt div class  left  gt          left content flexible width      lt  div gt       lt div class  right  gt          right content fixed width      lt  div gt   lt  div gt    CSS    container     display  table    width  100       left     display  table-cell    width   whatever you want  100   150px  auto        right     display  table-cell    width   whatever you want  100   150px  auto      Cases examples      One div is 150px fixed width   the other takes the rest of the width  left  width  150px   right  width  100       One div is auto to its inner width   the other takes the rest of the width  left  width  100    right  width  auto

User · Answer

This is a generic  HTML source ordered solution where    The first  column in source order is fluid The second column in source order is fixed   This column can be floated left or right using CSS    Fixed Second Column on Right   x000D   x000D   wrapper   x000D    margin-right  200px  x000D    x000D   content   x000D    float  left  x000D    width  100   x000D    background-color  powderblue  x000D    x000D   sidebar   x000D    float  right  x000D    width  200px  x000D    margin-right  -200px  x000D    background-color  palevioletred  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 Second Column on Left   x000D   x000D   wrapper   x000D    margin-left  200px  x000D    x000D   content   x000D    float  right  x000D    width  100   x000D    background-color  powderblue  x000D    x000D   sidebar   x000D    float  left  x000D    width  200px  x000D    margin-left  -200px  x000D    background-color  palevioletred  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

[css] 2 column div layout: right column with fixed width, left fluid

Examples related to css

Examples related to html