Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

column alignment issues

I have a main.full class above a .main and .aside class

in the .main I have a .columns with .one-third*6(3 * 2 stacking)

I need to place a border (using and after rule) between the one-third

the one-third have a item-wrapper (for margin) > img + h2 + p + button

the first one-third needs to have the item-wrapper remove its left margin and the last one-third needs to have its right margin removed (the aside adds its own)

When I remove the left margin from the first third, the image resizes, and thus making the entire thing off alignment

This all needs to break down later into responsive so there for the img tag globally has a max-width of 100%

I have tried vertical-align: top which then messes with the button on only one third

I have tried an img-wrapper but that might be adding too much structure and i need to use minimal everything.

I am pulling my hair out.

If I leave the margin on the left, everything is aligned except it is not aligned to the .main.full class above.

the whole thing goes into word-press later so keep that in mind

Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Nathan Remley

It would be much easier to resolve this if you posted a code example. :)

You can either paste your code on the forum here (use 4 spaces before each line to format it as a "code block" like this:

This is what code should look like.

Or you can use Codepen and then paste the link to your pen into the forum here. :)

1 Answer

Thanks, sorry for the late reply. I have fixed the issue via moving over to li's instead.

I forgot to close this after I fixed it..

The project was for a job I got, and it wasn't clear weather the LI system would work or if I had to do it the way they asked. It was confirmed that "what ever works best" was the way I should do it :P