Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ryan Schurton
Ryan Schurton
13,815 Points

Help with alignment

http://s1018.photobucket.com/user/Stay_Fly/media/mysite.png.html?filters[user]=105414598&filters[recent]=1&sort=1&o=0

as you can see from the link the last movie the amazing spider is not aligned with the others. any tips on making them all line up?

Ryan Schurton
Ryan Schurton
13,815 Points 
html
<div class = "Main_Titles">         
            <a class = "catagoryTitle">Movies</a>
            <div class = "Inside_Titles">

                <div class= "Posterlink">
                    <a href="TheAmazingSpiderMan2.html">
                    <p>Godzilla</p>
                    <img src="MoviesMainPagePictures/Godzilla_poster.jpg" alt="ThumbScore Logo" height="145" width="98">
                    </a>
                </div>

                <div class= "Posterlink">
                    <a href="TheAmazingSpiderMan2.html">
                    <p>Neighbors</p>
                    <img src="MoviesMainPagePictures/Neighbors_poster.jpg" alt="ThumbScore Logo" height="145" width="98">
                    </a>
                </div>

                <div class= "Posterlink">
                    <a href="TheAmazingSpiderMan2.html">
                    <p>Brick Mansions</p>
                    <img src="MoviesMainPagePictures/BrickMansions_Poster.jpg" alt="ThumbScore Logo" height="145" width="98">
                    </a>
                </div>

                <div class= "Posterlink">
                    <a href="TheAmazingSpiderMan2.html">
                    <p>The Amazing Spider-man 2</p>
                    <img src="MoviesMainPagePictures/SpiderMan2_poster.jpg" alt="ThumbScore Logo" height="145" width="98">
                </a>
            </div>
            </div>
        </div>





css
  .Main_Titles{
    background-color: #e0e0d2;
    margin-top: 35px;
    margin-bottom: 35px;
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    padding-top: 30px;
    border-radius: 5px;
    float:left;
}

 .Posterlink{
    float: left;
    margin-right: 35px;
    width: 100px;
    font-weight: bold;
}```

3 Answers

Luke Lee
Luke Lee
7,577 Points

The Amazing Spider-man 2 takes 2 lines. Give paragraph tag a height, which contains 2 lines of text, then make sure the movie name is always within 2 lines.

.Posterlink p{
height: 50px;
display:block;
}
Justin Cedroni
Justin Cedroni
5,526 Points
Justin Cedroni
Justin Cedroni
5,526 Points

While I can't provide a specific suggestion, it seems to me that the second line of text is pushing the image down. I would look at adjusting all the text (or text containers) to take up the same vertical space.

Ryan Schurton
Ryan Schurton
13,815 Points
Ryan Schurton
Ryan Schurton
13,815 Points

Thanks justin, thanks luke that worked.