How to align two divs side by side using the float clear and overflow elements with a fixed position div

Question

So I ve been trying to align two divs side by side without overlapping  I have one div which will be fixed as a sidebar and the right div as the content  Hopefully  someone can help me    x000D   x000D  body   x000D    background-color   444  x000D    margin-top  0  x000D    margin-bottom  0  x000D    x000D   x000D   wrapper   x000D    width  1005px  x000D    margin  0 auto  x000D    padding  0  x000D    overflow  auto  x000D    x000D   x000D   leftcolumn   x000D    width  250px  x000D    background-color   111  x000D    padding  0  x000D    margin  0  x000D    display  block  x000D    border  1px solid white  x000D    position  fixed  x000D    x000D   x000D   rightcolumn   x000D    width  750px  x000D    background-color   777  x000D    display  block  x000D    float  left  x000D    border  1px solid white  x000D    x000D   lt div id  wrapper  gt  x000D     lt div id  leftcolumn  gt  x000D     lt  div gt  x000D     lt div id  rightcolumn  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Accepted Answer

This answer may have to be modified depending on what you were trying to achieve with position: fixed;. If all you want is two columns side by side then do the following:

http://jsfiddle.net/8weSA/1/

I floated both columns to the left.

Note: I added min-height to each column for illustrative purposes and I simplified your CSS.

_x000D_

body {_x000D_
  background-color: #444;_x000D_
  margin: 0;_x000D_
}_x000D_
_x000D_
#wrapper {_x000D_
  width: 1005px;_x000D_
  margin: 0 auto;_x000D_
}_x000D_
_x000D_
#leftcolumn,_x000D_
#rightcolumn {_x000D_
  border: 1px solid white;_x000D_
  float: left;_x000D_
  min-height: 450px;_x000D_
  color: white;_x000D_
}_x000D_
_x000D_
#leftcolumn {_x000D_
  width: 250px;_x000D_
  background-color: #111;_x000D_
}_x000D_
_x000D_
#rightcolumn {_x000D_
  width: 750px;_x000D_
  background-color: #777;_x000D_
}

_x000D_

<div id="wrapper">_x000D_
  <div id="leftcolumn">_x000D_
    Left_x000D_
  </div>_x000D_
  <div id="rightcolumn">_x000D_
    Right_x000D_
  </div>_x000D_
</div>

_x000D_

If you would like the left column to stay in place as you scroll do the following:

http://jsfiddle.net/8weSA/2/

Here we float the right column to the right while adding position: relative; to #wrapper and position: fixed; to #leftcolumn.

Note: I again used min-height for illustrative purposes and can be removed for your needs.

_x000D_

body {_x000D_
  background-color: #444;_x000D_
  margin: 0;_x000D_
}_x000D_
_x000D_
#wrapper {_x000D_
  width: 1005px;_x000D_
  margin: 0 auto;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
#leftcolumn,_x000D_
#rightcolumn {_x000D_
  border: 1px solid white;_x000D_
  min-height: 750px;_x000D_
  color: white;_x000D_
}_x000D_
_x000D_
#leftcolumn {_x000D_
  width: 250px;_x000D_
  background-color: #111;_x000D_
  min-height: 100px;_x000D_
  position: fixed;_x000D_
}_x000D_
_x000D_
#rightcolumn {_x000D_
  width: 750px;_x000D_
  background-color: #777;_x000D_
  float: right;_x000D_
}

_x000D_

<div id="wrapper">_x000D_
  <div id="leftcolumn">_x000D_
    Left_x000D_
  </div>_x000D_
  <div id="rightcolumn">_x000D_
    Right_x000D_
  </div>_x000D_
</div>

_x000D_

User · Answer

Your code is correct  Kindly mark small correction    rightcolumn        width  750px       background-color   777       display  block         float  left  wrong           float  right   corrected         border  1px solid white

User · Answer

Try this    lt div id  wrapper  gt       lt div class  float left  gt left lt  div gt       lt div class  float right  gt right lt  div gt   lt  div gt    wrapper      width 500px      height 300px      position relative      float      background-color black      height 300px      margin 0      padding 0      color white      left      background-color blue      position fixed      width 400px      right      float right      width 100px      jsFiddle  http   jsfiddle net khA4m

User · Answer

I did this    lt  DOCTYPE HTML gt   lt html lang  en  gt       lt head gt           lt meta charset  UTF-8  gt           lt title gt AutoDealer lt  title gt           lt style gt           container              width  860px              height  1074px              margin-right  auto              margin-left  auto              border  1px solid red                      nav                      wrapper              display  block              overflow  hidden              border  1px solid green                    otherWrapper              display  block              overflow  hidden              border  1px solid green              float left                 left          width  399px          float  left          background-color  pink                     bottom          clear  both          width  399px          background-color  yellow                right          height 350px          width  449px          overflow  hidden          background-color  blue          overflow  hidden          float right              lt  style gt   lt  head gt   lt body gt       lt div class  container  gt           lt div class  nav  gt  lt  div gt           lt div class  wrapper  gt           lt div class  otherWrapper  gt               lt div class  left  gt                   lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Vestibulum ultricies aliquet tellus sit amet ultrices  Sed faucibus  nunc vitae accumsan laoreet  enim metus varius nulla  ac ultricies felis ante venenatis justo  In hac habitasse platea dictumst  In cursus enim nec urna molestie  id mattis elit mollis  In sed eros eget nibh congue vehicula  Nunc vestibulum enim risus  sit amet suscipit dui auctor et  Morbi orci magna  accumsan at turpis a  scelerisque congue eros  Morbi non mi vel nibh varius blandit sed et urna  lt  p gt               lt  div gt                lt div class  bottom  gt                   lt p gt ucibus eros  sed viverra ex  Vestibulum aliquet accumsan massa  at feugiat ipsum interdum blandit  Morbi et orci hendrerit orci consequat ornare ac et sapien  Nulla vestibulum lectus bibendum  efficitur purus in  venenatis nunc  Nunc tincidunt velit sit amet orci pellentesq lt  p gt  lt  div gt                lt  div gt                 lt div class  right  gt                   lt p gt Quisque vulputate mi id turpis luctus  quis laoreet nisi vestibulum  Morbi facilisis erat vitae augue ornare convallis  Fusce sit amet magna rutrum  hendrerit purus vitae  congue justo  Nam non mi eget purus ultricies lacinia  Fusce ante nisl  efficitur venenatis urna ut  pellentesque egestas nisl  In ut faucibus eros  sed viverra ex  Vestibulum aliquet accumsan massa  at feugiat ipsum interdum blandit  Morbi et orci hendrerit orci consequat ornare ac et sapien  Nulla vestibulum lectus bibendum  efficitur purus in  venenatis nunc  Nunc tincidunt velit sit amet orci pellentesque maximus  Quisque a tempus lectus  lt  p gt                lt  div gt           lt  div gt       lt  div gt   lt  body gt      So basically I just made another div to wrap the pink and yellow  and I make that div have a float left on it  The blue div has a float right on it

[css] How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/

Examples related to css

Examples related to html