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 CSS Foundations The Box Model Positioning Properties

Todd Squitieri
Todd Squitieri
8,001 Points
Posted by Todd Squitieri
Todd Squitieri
8,001 Points

Exact Positioning (X,Y)

I was viewing the lesson on positioning and was wondering how one could gain more control over the positioning of boxes in a layout.

Is it possible to position boxes at exact coordinates on the page, using some sort of an x and y axis? I'm wondering about this because I am presently trying to code my resume onto my site (http://www.englishteachertodd.com/efl-resume.html) and am having major difficulties with positioning sentences, paragraphs, and bullet points the way I want them; they just aren't aligning in a neat and tidy way.

I want to center the aforementioned and not have too many words flushed right. I also want to create two columns of bullet points.

Wouldn't exact positioning of this stuff be the way to go?

Any recommendations/suggestions/advice would be much appreciated, of course.

Thanks in advance!

-Todd

7 Answers

Nick Edwards
PLUS
Nick Edwards
Courses Plus Student 15,766 Points
Nick Edwards
Nick Edwards
Courses Plus Student 15,766 Points

Hi Todd,

Exact/absolute positioning isn't really a good idea because of differences in screen sizes. It could look good tailored exactly to your screen size, but may look distorted on another. Relative positioning on the other hand is designed to adapt the look to every screen size possible.

On a separate note, there's a typo near the top of your main.css (#maintcontent instead of #maincontent). This fixes quite a lot in terms of positioning things in the centre.

Which lists exactly do you want to have placed into two separate columns?

Reuben Varzea
Reuben Varzea
23,182 Points
Reuben Varzea
Reuben Varzea
23,182 Points

Using CSS margins is essentially the same as using x,y coordinates. So, for example, if you have an opening div that isn't nested inside of anything else with a class of "resume" for example. In CSS you can assign margin-top: 100px and margin-left: 100px to your resume class, and it will be positioned at about 100,100 (might be 101,101... my brain is foggy on this). You just need to play around a bit with this. Box modeling is your friend!

As for columns, I know CSS3 has some capabilities to handle this, but you'd want to verify browser support. You may need to just use browser specific assignments to make sure its cross-browser compatible (-webkit-, -moz-, etc).

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Thanks Reuben and Nick, for your very informative replies.

Nick- thanks so much for giving me the heads-up on the maincontent bug. I have since fixed the problem, and things look a bit less sketchy. On the issue of the columns, I have several bullet points that I need to add at the top of the resume (basically, I am trying to code the resume so that it looks like the one found here: http://toddsquitieri.weebly.com/uploads/2/5/9/5/25952880/todd_squitieri_efl_resume_recent_as_of_06.04.2014.pdf) . There are about fourteen bullet points that I would like to add at the top, maybe to have seven on both sides.

I'm trying to wrap my head around finding the most tactful way of doing this whole column thing with CSS. Would I have to wrap the bullets in div tags and then position two separate div tags using TOP MARGIN and LEFT MARGIN PROPERTIES, the way Reuben describes? Is that how this whole positioning thing would take place??

Or would I have to create HTML tables--TR and TD tags-- and then wrap this around a CSS ID and then position it?

Also, if possible, I really want to avoid having to add additional code to make the website compatible on older browsers, like I.E. 7 and below; essentially, I want the least amount of code to do the most amount of work.

In short, what would you consider "best practices," when it comes to positioning text like this? I've perused the World Wide Web Consortium on this matter, but the text is so dense on this website that I might as well be reading Sanskrit.

Any help you can provide would be so much appreciated! And I will totally pay it forward once I know what I'm doing!

Thanking you in advance!

Sincerely,

Todd

Nick Edwards
Nick Edwards
Courses Plus Student 15,766 Points
Nick Edwards
Nick Edwards
Courses Plus Student 15,766 Points

In order to convert a unordered list into multi-column list you can use the following (this will ensure all major browsers are supported as Reuben pointed out):

#englewoodexperience {
  /* create columns */  
  -webkit-column-count:2; /* Chrome, Safari, Opera */
  -moz-column-count:2; /* Firefox */
  column-count:2; /* IE 10 */

  /* create gap between columns */
  -webkit-column-gap:40px;
  -moz-column-gap:2;
  column-gap:2; 
}

You'll then need to target #englewoodexperience li so you can format the list items. When I was testing the CSS I removed the formatting you already had on there (the rounded and coloured backgrounds) so as to make it look closer to what you desired.

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Todd,

For starters, to move the grey boxes over you could play with the margins like this.

Jeff

#maincontent ul li {
    background-color: #CED8F6;
    border-radius: 20px;
    clear: both;
    list-style: none outside none;
    margin: 5px 0 5px -40px;
    max-width: 380px;
    padding: 5px;
    text-align: center;
}
Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Hi Jeff,

Okay, I think I see what you're doing here. You've also aligned the text to be "center," which I'm guessing is around roughly ...err... 75px? Something like this?

In any case, I think what I'll do is add section tags to each bulleted list and position it in the way you've shown here.

Thanks so much for the help!

T

Jeff Busch
Jeff Busch
19,287 Points

The css is from the link you provided. All I did was change the margin rule. Originally it was:

margin: 5px 0;

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Jeff- Oh okay, I see.

I should probably tinker with the code provided on weebly so I can see how they do it, although I would obviously have to be careful with copyright issues.

Nick- thanks so much for providing me with the code! That will really help me immensely as I begin to tinker with what I already have.

And for everyone who participated in this thread--and all future members who look at this thread--I found a nice link over at the W3C website which goes into great detail about positioning things. It even includes some really nice pictures. The URL is: http://www.w3.org/TR/css3-align/.

Will definitely read through this as I move forward!

Thanks everyone, for taking the time to answer my questions! I feel very comfortable moving forward at this point!

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Okay okay, I retract my statement. W3C does have some pretty awesome material: http://www.w3.org/Style/Examples/007/center.en.html

Right now I'm double-columning everyting on the page, including the photo. This seems like the way to go.

By the way, I wanted to make everyone's reply the BEST answer, but I can only choose one! =( Oh, cruel fate.