два плавающих div внутри контейнера

Question

Я пытаюсь определить два div бок о бок. Левое - содержимое div, справа - боковая панель div. Эти два div находятся внутри контейнера div. Я пробовал несколько разных способов, но никто из них не работает. Вот мой код CSS:

#container { 
    width:1000px; 
    position: relative; 
} 



#content { 
    width:700px; 
    background-color: white; 
    border-top: 3px solid midnightblue; 
    padding: 80px 10px 0px 10px; 
    float:left; 
} 

#sidebar{ 
    border-top: 3px solid midnightblue; 
    background-color:#E0E0E0; 
    padding: 20px; 
    width: 250px; 
    float:left; 
} 

Код HTML выглядит следующим образом:

<div id="container"> 

<div id="content"> 
    <p> This is my blog website. </p> 
</div> 

<div id="sidebar"> 
    <p>This is the sidebar. </p> 
</div> 

</div> 

Я также попытался изменить «поплавок: левый» в положение «поплавка: право» на боковой панели, и я также добавлено: "display: table;" в контейнере. Но это тоже не сработало. Боковая панель всегда находится ниже области содержимого, она не отображается в правой части содержимого div.

В самой внешней части есть класс обертки. Если я удалю класс оболочки и контейнер, тогда он будет работать. Но мне нужен класс-оболочка. Какие-либо предложения? Спасибо!

Answer 1

Сделать box-sizing: border-box. Know more about box-sizing

Просто добавьте ниже код в CSS.

* { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

JSFIDDLE DEMO

Answer 2

Проблема, с которой вы сталкиваетесь, заключается в том, что общая ширина больше ширины контейнера. Посмотрите на это: http://jsfiddle.net/kez5c71m/ меня изменить отступы в #sidebar от 20 до 10

#container { 
    width:1000px; 
    position: relative; 
} 



    #content { 
     width:700px; 
     background-color: white; 
     border-top: 3px solid midnightblue; 
     padding: 80px 10px 0px 10px; 
     float:left; 
    } 

    #sidebar{ 
     border-top: 3px solid midnightblue; 
     background-color:#E0E0E0; 
     padding: 10px; 
     width: 250px; 
     float:left; 
    } 

Answer 3

Вопрос относится к div набивкой. Уменьшить ширину DIV контента: width:680px; и он будет отображаться правильно, как показано здесь:

http://jsfiddle.net/k8ggmctq/

Answer 4

В соответствии с вашим CSS

#container width = 1000px 

#content width = 720px (700px + 10px + 10px left and right padding) 

#sidebar width = 290px (250px + 20px + 20px left and right padding) 

    Total width = 1010px (since the total width exceeds your #container width, the #sidebar was not able to position itself properly as per css applied) 

checkout the working code here (jsfiddle)

Answer 5

Установите ширину и высоту контейнера DIV и настроить как содержание и боковой панели Div ширина соответственно. Проверьте ссылку ниже скрипки он будет работать,

#container { 
    width:450px; 
    height:400px; 
    position: relative; 
    border: 3px solid midnightblue; 
} 



#content { 
    width:200px; 
    background-color: white; 
    border: 3px solid midnightblue; 
    padding: 80px 10px 0px 10px; 
    float:left; 
} 

#sidebar{ 
    border: 3px solid midnightblue; 
    background-color:#E0E0E0; 
    padding: 20px; 
    width: 100px; 
    float:left; 
} 

http://jsfiddle.net/w5dmzoqj/