CSS Positionierungselemente 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 alle die CSS enthalten, weil ich nicht sicher war, was genau würde eine Wirkung auf diese Art der Sache haben. Außerdem habe ich versucht, sideContent und mainContent inline anzuzeigen, aber sie scheinen einfach zu verschwinden. Irgendeine Idee warum?

Answer 1

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

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

auf beide von ihnen.

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

Answer 2

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

Answer 3

Wenn Sie nicht wissen, wie viele Elemente verwendet werden, oder wollen, dass sie die normale Breite haben, die einzige andere Möglichkeit ist, eine Tabelle zu verwenden:

<div id='main'> <table> <tbody> 
    <tr> 
    <td><div id='mainContent'></div></td> 
    <td><div id='sideContent'></div></td> 
    </tr> 
</tbody> </table> </div>