CSS Positionierung von Elementen nebeneinander

Question

Ich frage mich, ob Sie mir helfen können, zwei divs, mainContent und sideContent nebeneinander zu positionieren?

HTML:

<div id='main'>
  <div id='mainContent'>
  </div>
  <div id='sideContent'>   
  </div>
</div>

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;}

Ich habe alle css enthalten, weil ich nicht sicher war, was genau eine Wirkung auf diese Art von Sache haben würde. Außerdem habe ich versucht, sideContent und mainContent Display inline, aber sie scheinen einfach zu verschwinden. Irgendeine Idee, warum?

Answer 1

Wenn Sie wollen, dass sie nebeneinander angezeigt werden, warum ist sideContent das Kind von mainContent? machen sie Geschwister dann verwenden:

float:left; display:inline; width: 49%;

bei beiden.

#mainContent, #sideContent {float:left; display:inline; width: 49%;}

Answer 2

Sie können dem übergeordneten Knoten die Eigenschaft "display:flex" hinzufügen, damit alle untergeordneten Knoten nebeneinander gruppiert werden

#main{
      display:flex;
}

Answer 3

Versuchen Sie float Eigentum. Hier ist ein Beispiel: http://jsfiddle.net/mLmHR/