CODEWITHSUNDEEP
htmlcss
user3903499
user3903499

Reputation:

HTML elements wont pin to the right

Ive just been practicing using HTML and CSS and I've ran into an issue. I want this (the objects in the blue square) to be on the right but it goes underneath everything else for some reason. How can I fix it? Here is what I have tried:

enter image description here

HTML:

                    <div class="status-post row">
                        <div class="post-meta col-xs">
                            <center>
                            <img src="./testpost.png" alt/>
                            <p>
                                "This is a test status... Test. Test. Test."
                            </p>
                           </center>
                        </div>
                        <div class="post-interact col-xs-2">
                            <a href="#" class="vote voteup">
                                <img src="./img/global/upvote.png" alt/>
                            </a>
                            <span id="picidhere" class="count">100</span>
                            <a href="#" class="vote report">
                                <img src="./img/global/report.png" alt/>
                            </a>
                        </div>
                    </div>

CSS:

#appbody .status-post {
position: relative;
background: #76ac8b;
min-height: 300px;
padding: 25px;
margin-bottom: 25px;
opacity: 0.5;
}

#appbody .status-post .post-meta {
margin-bottom: 25px;
}


#appbody .status-post .post-meta img {
margin-left: auto;
margin-right: auto;
}

#appbody .status-post .post-meta p {
text-align: center;
font-size: 20px;
clear: both;
color: #FFF;
font-family: "Arvo";

}

#appbody .status-post .post-interact {
text-align: center;
margin: 0 auto;
height: 100%;
padding-right: 0px;
padding-left: 0px;
position: relative;
top: 50%;
transform: translateY(30%);
vertical-align: middle;

}

#appbody .status-post .post-interact .vote {
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 20px;
display: block;
}

#appbody .status-post .post-interact .report {
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 26px;
display: block;
padding-top: 12px;
}


#appbody .status-post .post-interact .count {
font-size: 25px;
color: #FFF;
display: block;
font-family: "Arvo";
padding-top: 9px;
padding-bottom: 9px;
}

Upvotes: 0

Views: 113

Answers (3)

Yogesh Sharma
Yogesh Sharma

Reputation: 2017

Please add below css 

.post-interact {
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  }

into bottom of your css.

Upvotes: 0

Sachin
Sachin

Reputation: 765

Just like the others have said, you need to make your content positioned absolutely, and then position then to the top right.

Code like this should work:

.post-interact {
   position: absolute;
   top: 0px;
   right: 0px 
}

Upvotes: 1

naman kalkhuria
naman kalkhuria

Reputation: 404

#appbody .status-post .post-interact {
 position: absolute;
 top: 10px;
 right: 10px 
}

use absolute positioning to place the element

EDIT

Check this demo to understand absolute positioning http://jsfiddle.net/jja27pce/

Upvotes: 2

Related Questions