CSS Positioning Elements Next to each other

Question

I wondering if you can help me position two divs  mainContent and sideContent next to each other   HTML    lt div id  main  gt     lt div id  mainContent  gt     lt  div gt     lt div id  sideContent  gt        lt  div gt   lt  div gt    CSS      main   width  100   min-height  400px      background   0A3D79     for non-css3 browsers        background  -webkit-gradient linear  left top  left bottom  from rgb 20 114 199    to rgb 11 61 122        for webkit browsers        background  -moz-linear-gradient top   rgb 20 114 199    rgb 11 61 122        for firefox 3 6           gradient code from http   www webdesignerwall com tutorials cross-browser-css-gradient         mainContent   width  75   margin-top  20px  padding-bottom  10px  min-height  400px  background-color  blue         sideContent   width  22   margin-top  20px  padding-bottom  10px  min-height  400px  background-color  red  border-style  solid  border-left-width  3px   border-left-color  white border-right-width 0px border-top-width 0px border-bottom-width 0px     I included all of the css because I wasn t sure what exactly would have an effect on this kind of thing  Also  I ve tried making sideContent and mainContent display inline but they just seem to disappear  Any idea why

User · Answer

Try float property  Here s an example  http   jsfiddle net mLmHR

User · Answer

If you want them to be displayed side by side  why is sideContent the child of mainContent  make them siblings then use   float left  display inline  width  49     on both of them    mainContent   sideContent  float left  display inline  width  49

[css] CSS Positioning Elements Next to each other

Examples related to css