Два DIV бок о бок в меньшем DIV

Question

Я пытаюсь иметь два DIV бок о бок внутри меньшего DIV с переполнением: hidden; Я бы ожидал, что оба DIV будут рядом друг с другом, а некоторые из них будут скрыты из-за их родительского DIV, который меньше по ширине. Вместо этого последний DIV движется под другим DIV, даже если у них обоих есть float: left ;.

HTML:

<div id="wrapper"> <!-- wrapper --> 
    <div id="nav"> <!-- nav --> 

    </div> <!-- /nav --> 
    <div id="container"> <!-- container --> 

    </div> <!-- /container --> 
</div> <!-- /wrapper --> 

CSS:

#wrapper { 
    float:left; 
    height:960px; 
    width:540px; 
    background-color:#eeeeee; 
    overflow:hidden; 
} 

#nav { 
    float:left; 
    width:460px; 
    height:960px; 
    background-color:red; 
} 

#container { 
    float:left; 
    width:540px; 
    height:960px; 
    background-color:green; 
} 

Это эффект я хочу:

Answer 1

Если вы хотите два элемента бок о бок, я думаю, вы должны добавить дополнительный элемент «обертку» какой-то, чтобы окружить ваш #nav и #container элементов. (Переполнение в автоматический режим, так что вы можете увидеть элементы находятся рядом друг с другом.)

Пример:

#wrapper { 
 
    float: left; 
 
    height: 960px; 
 
    width: 540px; 
 
    background-color: #eeeeee; 
 
    overflow: auto; 
 
} 
 
#wrap { 
 
    width: 1000px; 
 
} 
 
#nav { 
 
    float: left; 
 
    width: 460px; 
 
    height: 960px; 
 
    background-color: red; 
 
    clear: 
 
} 
 
#container { 
 
    float: left; 
 
    width: 540px; 
 
    height: 960px; 
 
    background-color: green; 
 
}

<div id="wrapper"> 
 
    <!-- wrapper --> 
 
    <div id="wrap"> 
 
    <!-- some new wrapping element --> 
 
    <div id="nav"> 
 
     <!-- nav --> 
 

 
    </div> 
 
    <!-- /nav --> 
 
    <div id="container"> 
 
     <!-- container --> 
 

 
    </div> 
 
    <!-- /container --> 
 
    </div> 
 
</div> 
 
<!-- /wrapper -->

Answer 2

я предлагаю предотвращение обертку, используя display: inline-block на ребенка <div>, используя white-space: nowrap; на контейнере:

#wrapper { 
 
    float: left; 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: #eeeeee; 
 
    overflow: hidden; 
 
    /* prevents content wrapping to a new line */ 
 
    white-space: nowrap; 
 
} 
 
#nav { 
 
    display: inline-block; 
 
    width: 400px; 
 
    height: 960px; 
 
    background-color: red; 
 
    /* purely to move the first element to the left, 
 
    to show that both elements are on the same line: */ 
 
    margin-left: -200px; 
 
} 
 
#container { 
 
    display: inline-block; 
 
    width: 400px; 
 
    height: 960px; 
 
    background-color: green; 
 
}

<div id="wrapper"> 
 
    <!-- wrapper --> 
 
    <div id="nav"> 
 
    <!-- nav --> 
 

 
    </div> 
 
    <!-- /nav --> 
 
    <div id="container"> 
 
    <!-- container --> 
 

 
    </div> 
 
    <!-- /container --> 
 
</div> 
 
<!-- /wrapper -->