Oddly placed CSS

Posted by user3682473 on Stack Overflow See other posts from Stack Overflow or by user3682473
Published on 2014-05-31T03:02:58Z Indexed on 2014/05/31 3:25 UTC
Read the original article Hit count: 99

Filed under:
|

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/

© Stack Overflow or respective owner

Related posts about html

Related posts about css