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
Adam Casey
3,796 PointsPositioning elements in a div
NOTE: I'd class myself as a CSS beginner.
We are currently re-designing our corporate website. The bulk of the work has been done, but I'm just looking to add a careers page, and need help with the styling for a column that displays list of available jobs and a link to apply for that job.
The code needs to be applied to an existing CMS. The CMS allows me to add in modules on the fly, these are basic rich text editor modules. That allow me to enter <h> tags <p> tags and ordered and unordered lists.
I want the design to show the name of the job with a link to apply for that job, all encased in a grey round cornered box.
Here's what I have so far: http://codepen.io/adamlcasey/pen/jIsFB
My issue is getting the button to align to the far right and to be in the middle of the grey box even if the job title is on 1, 2 or 3 lines.
How would you recommend achieving this?
Adam Casey
3,796 PointsNope I've tried both and I'm nearly there. Just struggling with getting the button centered. If I remove the float:right from the button it is dead centered.
5 Answers
Ralf Koller
4,506 Pointshm at first i would take a look at the html markup. maybe consider using the button element instead of a list element for the button. and why not use a li for each phrase e.g. customer support, lead, manager, business development. instead of pack e.g. customer support and lead separated by a <br> in one single li.
for the horizontal placement you could either declare the .box position relative and the ul and the button element absolute. then left:0 on ul and right:0 on the button. or you might float the two. float left and right accordingly.
and for the vertical placement you might take a look at the following article: http://css-tricks.com/centering-in-the-unknown/ . guess a simple vertical-align: center won't work probably.
Adam Casey
3,796 PointsThanks Ralf, I'll check that out now.
James Gill
Courses Plus Student 34,936 PointsAdam,
If you want to align the button to the far right, I think I'd add this to the .button class: float: right; clear: both;
Adam Casey
3,796 PointsHi James,
Thanks I've got the button to float to the right now. Just need to line both the button and the title in the middle of the div now.
Cheers
Adam Casey
3,796 Pointswhoops double post
James Gill
Courses Plus Student 34,936 PointsAdam,
try adding margin-right: 50% to the .button class.
Colette Pitamba
2,662 PointsI would suggest using if/else statement in Javascript or Jquery. Ex. if (box height = 20px) {button has margin-top 10px}
I'm assuming the job title wont be that long so estimating a max size for your box and applying if/else or case statements to have the button flow well. Also keep the button float right
Adam Casey
3,796 PointsHmm I only wanted to layout some basic elements. I thought this would have been fairly simple css, is javascript really necessary?
Colette Pitamba
2,662 PointsThat was all I could think of to make it dynamic.
Giving .box a position-relative and .button a position-absolute and margin-top in em or % will let it sit nicely in the center but it will not scale when .box is bigger
You should also try posting this question on css-tricks and stack overflow. I would like to know a more simple solution as well.
Adam Casey
3,796 PointsAdam Casey
3,796 PointsI've added a second example below that uses an un-ordered list but I'm still seeing issues aligning the content to the center of the box div.