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 John Levy
John Levy
1,451 Points

Issues lining up text

I am trying to line my code up so it says the name of the exercise program then below this the price then below this the paypal "buy now" button. I am trying to do this for three different package deals with a max width of 600px. I managed to do the first one but once I try and place the buy now button below the price of the second option the buy now button just moves to the right of the page and does not move. I have attached my code below. Can some explain what I am doing wrong and why the buy now button disapears when I try and place it under the price? http://codepen.io/Johned22/pen/vKzAyd Thanks in advance

3 Answers

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

Hey John, I could be missing your point, but I would think you would want to structure your html like this....

<p class="program7">24 week body reshaping program</p>
<p class="price6">$215.95</p>

  <div class="paypalbutton6" src="paypalbutton.jpg">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="blank">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="Q36SZLRRNDK7Q">
<input type="image" src="paypalbutton.jpg" border="0" name="submit"
 alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="">
</form>
</div>

Then maybe if you wanted each block side by side, put each block in a div, and float THAT div left. But I'm not really sure what you're looking for

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

I tried the float to the left which helps a little but still when adjusting the margin I cannot line it under the text. I have been playing around with the margin but not having any luck. This is the code for the button I am trying to move now to the right slightly-

.paypalbutton5{ width: 600%; float: left; height:400%; margin: -300px 70px 320px 365px;

}

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Ok I think I have figured it out. I just played around with the margins a little.