user2649425 user2649425 - 1 month ago 7
CSS Question

Simple CSS Positioning

Okay Im terrible at css and desperate for some help. I know this will be simple for someone who is good at it.

I included my code and what Iv been trying, and several pictures of what it looks like. The first picture is what I have. The second is what I want it to look like.

What I have

What I want it to look like

HTML

<div class="thumbposter"><img src="http://tipmypicks.com/cssmovie/imdb/imdbImage.php?url=http://ia.media-imdb.com/images/M/MV5BMTcwNzUzMjU1OV5BMl5BanBnXkFtZTcwMTM0NDQ2MQ@@._V1._SY200.jpg"/><div class="ratingimage"><h1>Step Brothers</h1><img src="http://tipmypicks.com/cssmovie/images/ratedr.png"></div></div>
<div class="genre"><p>Genre: Comedy</p></div>
<div class="releasedate"><p>Released: 2008</p></div>
<div class="rating"><p>Rating: 6.8</p></div>
<div class="plot"><h1>Plot</h1><p>Two aimless middle-aged losers still living at home are forced against their will to become roommates when their parents get married.</p></div>


CSS

<style>
@font-face
{
font-family: MyriadPro-Regular;
src: url(http://tipmypicks.com/cssmovie/font/MyriadPro-Regular.otf);
}


.thumbposter img
{
margin-top: 50px;
margin-left: 50px;
border:2px solid;
border-color: grey;
border-radius:2px;
}

.thumbposter h1 {
position: absolute;
left: 500px;
top: 60px;
color: white;
font-size:30px;
font-family: MyriadPro-Regular;
}

.releasedate p {
position: absolute;
left: 323px;
top: 295px;
color: white;
font-size:15px;
}

.genre p {
position: absolute;
left: 323px;
top: 315px;
color: white;
font-size:15px;
}

.rating p {
position: absolute;
left: 323px;
top: 275px;
color: white;
font-size:15px;
}

.plot p {
position: absolute;
left: 500px;
top: 170px;
width: 500px;
color: white;
font-size:15px;
}

.trailer a {
position: absolute;
left: 345px;
top: 260px;
color: white;
font-size:17px;
}

.playbutton img {
position: absolute;
left: 325px;
top: 260px;
}

.plot h1 {
position: absolute;
left: 500px;
top: 140px;
color: white;
font-size:22px;
}


.ratingimage img {
position: relative;
left: 500px;
top: 60px;
float:left;
}


@font-face
{
font-family: airstrikebold;
src: url(http://tipmypicks.com/cssmovie/font/airstrikebold.ttf);
}
</style>


I just want the R to go next to the title... As you can see from my code, I am terrible at css and use Absolute positioning for everything, I can not do that with the "R" rating because some titles are longer than others. Can someone please help me?

Answer

Here's a non position:absolute solution:

Also refactored your markup:

HTML

<div class="container">

    <div class="left">
         <img src="http://tipmypicks.com/cssmovie/imdb/imdbImage.php?url=http://ia.media-imdb.com/images/M/MV5BMTcwNzUzMjU1OV5BMl5BanBnXkFtZTcwMTM0NDQ2MQ@@._V1._SY200.jpg"/>
        <p>Genre: Comedy</p>
        <p>Released: 2008</p>
        <p>Rating: 6.8</p>
    </div><! /.left -->

    <div class="right">
        <h1>Step Brothers <img src="http://tipmypicks.com/cssmovie/images/ratedr.png"></h1>

        <h1>Plot</h1>
        <p>Two aimless middle-aged losers still living at home are forced against their will to become roommates when their parents get married.</p>


    </div><!-- /.right --> 

    <div class="clear"></div>

</div><!-- /.container -->

CSS

.left { float:left; width:200px; }
.right { float:left; width:400px; }

.clear { clear:both }

JSFiddle Demo

Comments