Элементы позиционирования CSS Рядом друг с другом

Question

Мне интересно, можете ли вы помочь мне разместить два divs, mainContent и sideContent рядом друг с другом?

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

Я включил все CSS, потому что я не был уверен, что именно будет иметь влияние на такого рода вещи. Кроме того, я пробовал делать sideContent и mainContent, но они просто исчезают. Любая идея почему?

Answer 1

Если вы хотите, чтобы они отображались бок о бок, почему sideContent ребенок mainContent? сделайте их братьями и сестрами, затем используйте:

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

на обоих из них.

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

Answer 2

Просьба float Недвижимость. Вот пример: http://jsfiddle.net/mLmHR/

Answer 3

Если вы не знаете, сколько элементов будет использоваться, или хотите, чтобы они имели нормальную ширину, единственным способом является использование таблицы:

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