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 Byron Farrell
Byron Farrell
5,700 Points

Inline-block moving text in container

Hi,

I am trying to create a portfolio website. I have started creating the CV page and I am using a mock CV. Everything is going according to plan except for one thing. When I use "Display: inline-block;" on the left-content and right-content class the text in the left-content class gets pushed down to the bottom of the container. Does anyone know what could be causing this?

My code: https://w.trhou.se/xy5dfxio3y

Thanks!

1 Answer

Evgeniia Mas
Evgeniia Mas
4,452 Points
Evgeniia Mas
Evgeniia Mas
4,452 Points

I don't understand for what you want to use inline-block for that classes, but you change the structure and the sizes of your elements, that's why page's section crashes really.

To understand this make so; give to .left-content red color background and also green color to .right-content.

background-color: red;

Any bright colors you prefer, just to see it obviously by yourself! Than change the properties of classes from block to inline-block and back, You will see that text takes with inline-block now only its real width, not the whole width of parent element. And the second element also. The place becomes free and the current structure changes, It's not just moving text! It's understanding of the core, of the difference between block, inline and inline-block.

Hope you will see it by your own! And it will become more clear to use in future!

Byron Farrell
Byron Farrell
5,700 Points

I used float: left; on the left-content class and everything worked fine.

Thanks for your input though!