Html 内容和侧边栏未对齐

我觉得寻求帮助很愚蠢，我相信解决办法可能很简单，但目前我还不明白

我的问题是，如果侧边栏延伸的范围超过了内容区域，那么它就会错位。目前我似乎找不到解决办法

以下是CSS：

.latest-photos {
background: #302c2c;
box-shadow: inset 0 0 75px rgba(0, 0, 0, 0.5);
height: 80px;
color: #fff;
padding: 5px;
margin: -335px 0 0 0;
position: absolute; }

/****************************
CONTENT
****************************/
.content {
float: left;
position: absolute; }

/* SIDEBAR */
.sidebar {
width: 380px;
margin: -210px 0 0 0;
float: left; }
.sidebartitle {
 font: 1.313em 'karla', sans-serif;
 color: #000;
 text-align: justify;
 padding: 0 0 10px 0; }
.sidebarcontent {
 padding: 5px;
 background: #f8f7f7;
 font: 1em 'Lato', sans-serif;
 color: #000;
 margin: 0 0 25px 0; }

/* MAIN CONTENT */
.entry {
width: 610px;
margin: -645px 0 0 390px;
float: right; }
.entrytitle {
 font: 1.313em 'karla', sans-serif;
 color: #000;
 text-align: justify;
 padding: 0 0 10px 0; }
.entrycontent {
 padding: 5px;
 background: #f8f7f7;
 font: 1em 'Lato', sans-serif;
 color: #000;
 margin: 0 0 30px 0;
 border-bottom: 5px solid #330000; }

以下是索引：

<div class="wrapper">
<div class="latest-photos">Latest images go here.</div>


    <div class="sidebar cf">
        <div class="sidebartitle">
            Sidebar Title here
        </div>
        <div class="sidebarcontent">
            This is a content box. All sidebar here! All chat boxes and what-have-not go here!!
        </div>
    </div>

    <div class="entry cf">
        <div class="entrytitle">
            Entry title here!
        </div>
        <div class="entrycontent">
            This is out main content area!! Here is where all the latest news, images, and more will be posted.
            This new verion will be great!
        </div>
    </div>


</div>

这里有最新的图片。
这里有侧边栏标题
这是一个内容框。所有的边栏在这里！所有的聊天室和什么都没有放在这里！！
参赛作品名称在这里！
这是我们的主要内容区！！这里是所有最新新闻、图片和更多内容的发布地点。
这个新版本会很棒！

---

感谢您的帮助

始终尝试使

位置：静态制作骨架时。我刚刚添加了具有相同html结构的新样式，并为边栏和内容div添加了包装器


找到下面的JSFIDLE链接

你能用小提琴再现这个吗？在这种情况下，您的代码没有多大意义，您的负边距将所有内容定位在屏幕外