html - Oddly placed CSS -

i want news content centered (including image , text), instead, it's oddly placed right this: http://prntscr.com/3o7tjc

i tried ways fix , can't find it... um... here html part:

<div id="maincontentcontainer">     <div id="maincontent">          <div class="posttitle">             test         </div>         <div class="posterinfo">             <img width="40%" class="profilepic" src="/site/uploads/avatars/f3780c97491dd9f62f0dd7b1b8bb090a0b9e87d0.png">             <p>posted by: <a class="postedby" href="#">test</a></p>         </div>         <div class="postcontent">             <div class="postimagecontainer" align="center">                 <img class="postimage" src="../uploads/img/test">             </div>              <div class="post">                 <p>test</p>             </div>             comments have been disabled post.</div>         </div>         <div id="sidebar">             welcome, admin<br><a href="logout.php">logout</a><br>         </div>     </div> </div> 

annnd, here css.

body {     margin: 0px;     background-color: #6c9ddf;     background-image:url("/assets/img/background.png");     background-repeat: no-repeat; }   .hq {     position:relative;     top:40px;     width:1300px;     height:100%;     left:1%; } #logo {     position:absolute;     width:40%;     height:30%;     right:30%;     z-index: 100; } #homebtn, #playbtn, #newsbtn, #helpbtn {     background: url(/assets/img/menubtns.png) no-repeat; } #homebtn {     background-image: url("/assets/img/home.png");     background-repeat:no-repeat;     background-size: 75%;     width: 204px;     height: 184px;     position: absolute;     top: 318px;     left: 353px; } #homebtn:hover {     background-image: url("/assets/img/home-rollover.png"); } #playbtn {     background-image: url("/assets/img/play.png");     background-repeat:no-repeat;     background-size: 100%;     width: 200px;     height: 230px;     position: absolute;     top: 240px;     left: 480px; } #playbtn:hover {     background-image: url("/assets/img/play-rollover.png"); } #newsbtn {     background-image: url("/assets/img/news.png");     background-repeat:no-repeat;     background-size: 100%;     width: 290px;     height: 290px;     position: absolute;     top: 210px;     left: 650px; } #newsbtn:hover {     background-image: url("/assets/img/news-rollover.png"); } #helpbtn {     background-image: url("/assets/img/help.png");     background-repeat:no-repeat;     background-size: 100%;     width: 330px;     height: 380px;     position: absolute;     top: 180px;     left: 930px; } #helpbtn:hover {     background-image: url("/assets/img/help-rollover.png"); }  #maincontentcontainer {     border-radius: 30px 30px 30px 30px;     -moz-border-radius: 30px 30px 30px 30px;     -webkit-border-radius: 30px 30px 30px 30px;     border: 8px solid #000000;     background-color: #ffe12f;     position: relative;     width: 1200px;     top: 60px;     left: 8%;     padding: 50px;     overflow: hidden;   height: 100%;    position: relative } #maincontent {     position: relative;     border-radius: 30px 30px 30px 30px;     -moz-border-radius: 30px 30px 30px 30px;     -webkit-border-radius: 30px 30px 30px 30px;     border: 0px solid #000000;     background-color: #ffffff;     height: 100%;     padding: 20px;     float: left;     width: 900px; } #sidebar {     position: relative;     border-radius: 30px 30px 30px 30px;     -moz-border-radius: 30px 30px 30px 30px;     -webkit-border-radius: 30px 30px 30px 30px;     border: 0px solid #000000;     background-color: #ffffff;     height: 100%;     padding: 20px;     float: right;     width: 200px; } .posttitle {     font-size: 40px;     font-weight: bold;     color: #515151;     text-align: center; }  .text {     text-align: center; } .title {     text-decoration: none;     color: #515151; } .title:visited {     text-decoration: none;     color: #515151; } .title:hover {     text-decoration: underline; } .postedby {     text-decoration: none; } .posterinfo {     float: left;     padding: 5px; } .postcontent {     overflow: hidden; } .postimagecontainer {     padding: 5px; } .postimage {     width: 100%;     position:relative; } .profilepic {     border-radius: 30px 30px 30px 30px;     -moz-border-radius: 30px 30px 30px 30px;     -webkit-border-radius: 30px 30px 30px 30px;     border: 0px solid #000000; } .registerformwrapper {     float: left;     width: 50%; } .commentformcontainer {     margin-top: 45px; } .commentcontent {     border-radius: 30px;     overflow: auto;     resize: none;     padding: 10px;     outline: none; } .commentbtn {     background: url("../img/comment.png");     width: 269px;     height: 260px;     border: none;     position: relative;     top: -50px;     cursor: pointer;     text-indent: -999px; } .commentbtn:hover {     background: url("../img/commenthover.png"); } .toonname {     font-weight: bold;     font-size: 20px; } .toonnameinput {     border-radius: 30px;     padding: 5px;     outline: none; } .commentbtns {     outline: none; } .commentforminputcontainer {     width: 60%;     float: left; } .registerinput {     border-radius: 30px;     padding: 5px;     outline: none; } .logininput {     border-radius: 30px;     padding: 5px;     outline: none; } .inputlabel {     display: inline-block;     float: left;     width: 200px;     font-size: 20px;     font-weight: bold; } 

i tried changing possible combinations, , didnt work exactly...

here fiddle - http://jsfiddle.net/2eyyc/

:edit: alright, did use thing got told , did work appears i'm stuck kind of bar blocking view.

based on understand of op, here solution. added width in pixels css class profilepic

.profilepic {     border-radius: 30px 30px 30px 30px;     -moz-border-radius: 30px 30px 30px 30px;     -webkit-border-radius: 30px 30px 30px 30px;     border: 0px solid #000000;     width: 120px; /* width added here */ } 

reason added - since mentioned width 40% , there no defined width parent not able take width properly. changing width pixels trick.

fiddle