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
Omar Suriel
5,403 PointsCSS boxes not aligning properly. please help!
Here is the code:
http://codepen.io/Osuriel/pen/evErBB?editors=1100
I AM TRYING TO REPLICATE THE PICTURE (TOP) ON HTML AND CSS (BOTTOM). I HAVE NO IDEA WHY THE BOXES ARE NOT ALIGNING CORRECTLY AND THE ONE ON THE RIGHT IS A COUPLE OF PIXES OFF. THANKS!!
for some reason the submit button is 1 or 2 pixels lower than the form input.
Omar Suriel
5,403 PointsI dont underdstand why the border would be a problem if i am using * {box-sizing: border-box} and I also dont understand why i would set the height to 100%. that would make the box 100% the size of the width not the height. as far as I know. or maybe im wrong.
2 Answers
errbpziwwb
7,284 PointsIn my experience that's just the world of CSS and sometimes things just don't make sense, especially with form fields.
You actually inspired me to try the task myself as I've only been learning a couple of years. I used flexbox to layout some of the components and this seems to take care of some of the problems you are having.
Omar Suriel
5,403 Pointsyou did a great job.
errbpziwwb
7,284 PointsThank you Omar :)
errbpziwwb
7,284 Pointserrbpziwwb
7,284 PointsHi Omar,
It seems the
border-bottom-width: 2px;is pushing the button down. You could remove the bottom border or usetransform: translateY(-2px)to pull it back up?Also I've noticed the $50 box isn't displaying properly (look at the bottom border). This can be fixed by changing
height: 43px;toheight: 100%;on '#money-input`.Hope this helps :)