保持2 Divs以包装为中心

I'm trying to get the Main Content Area and the Sidebar colors to extend infinitely left and right as I did with the Header/Footer when you zoom out. But for whatever reason.. it's showing the background color (black) instead.

我正在尝试让主内容区域和侧边栏颜色左右无限延伸,就像我缩小时使用页眉/页脚一样。但无论出于何种原因......它显示的是背景颜色(黑色)。

Here's the website in question: https://www.Answers.legal

这是有问题的网站:https://www.Answers.legal

#main {
	width: 100%;
}

.content {
	width: 80%;
	background: #cccccc;
	height: 900px;
	display: inline-block;
	vertical-align: top;
	position: relative;
	box-sizing: border-box;
	padding: 10px;
	float: left;
}

.sidebar {
	background: #424242;
	height: 900px;
	width: 20%;
	display: inline-block;
	box-sizing: border-box;
	float: right;
	padding: 10px;
}

.wrapper {
    width: 1300px;
    margin: 0 auto;
    position: relative;
    background: transparent;
}

<div id="main"><div class="wrapper">
<div class="content">
Welcome to Answers.Legal!
</div>
<?php $path = $_SERVER['DOCUMENT_ROOT'];
   $path .= "/common/sidebar.php";
   include_once($path); ?>
</div></div>

What can I do??

我能做什么??

Thanks.

2 个解决方案

#1

In the case of your header, you have the background colors on outer elements that extend to the page width. With the main content, this is not the case. The challenge comes because you have a vertical column arrangement rather than horizontal rows.

对于标题,外部元素的背景颜色会延伸到页面宽度。对于主要内容,情况并非如此。挑战之所以出现,是因为您有垂直列排列而不是水平行。

You'll probably want to move the background color to #main, either as a vertically-repeating image or a CSS gradient. Here's a start for the 2nd option.

您可能希望将背景颜色移动到#main,作为垂直重复图像或CSS渐变。这是第二个选项的开始。

#2

Add float: left; to .content and you should be fine.

添加浮动:左;到.content,你应该没事。

#1