странное поведение плавает

Question

Это мой код

#sidebar 
{ 
    width:140px; 
    border: solid 3px green; 
    height:300px; 
    float:left; 
} 


#content 
{ 
    border: solid 3px blue; 
    height:400px; 
    float:left; 

} 
<div id="sidebar">Sidebar</div> 

<div id="content">Content</div> 

---

Поскольку ширина DIV контента не определен, как и ожидалось он будет занимать только достаточно места, чтобы отобразить текст внутри DIV

Теперь вместо того, чтобы использовать поплавок я использовать запас, как это:

#content 
{ 
    border: solid 3px blue; 
    height:400px; 
    margin-left:160px; 

} 

Содержимое div теперь будет занимать остальную часть ширины окна просмотра браузера, хотя ширина не указана.

Я предполагаю, что причиной этого является то, что содержимое div наследует атрибут width тега body, назначенного таблицей стилей пользовательского агента. Если это так, мой вопрос: Почему это не наследование, когда я использую поплавки?

Answer 1

Неуказанный width по div по умолчанию width:100%;.

Необходимо указать width:auto;, чтобы получить эффект, который хотите, только достаточно широкий, чтобы содержать его содержание.

#content 
{ 
    width : auto; 
    border : solid 3px blue; 
    height : 400px; 
    float : left; 
}