Oddly placed CSS
- by user3682473
I want my news content to be completely centered (including image and text), but instead, it's oddly placed to the right like this:
http://prntscr.com/3o7tjc
I tried most ways to fix it and i can't find it... um..
here is the 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 for this post.</div> </div>
<div id="sidebar">
Welcome, Admin<br><a href="logout.php">Logout</a><br></div> </div>
</div>
annnd, here is 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 most possible combinations, and it didnt work exactly...
Here is the fiddle - http://jsfiddle.net/2EYYC/
