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

Bernadette Aube
Bernadette Aube
2,602 Points
Posted by Bernadette Aube
Bernadette Aube
2,602 Points

How to right-align an image while using display:inline-block, creating two columns, text and image

I want two columns; text description on right and image on left. Each column set a t 50% and white space between is removed. Text comes out fine, the image is aligned on the left side of its column. When using Chrome developer tools I can see on the image side of the container a right margin but I can't change it. Would it be better to use a float instead of the display: inline-block?

victor cooper
victor cooper
6,436 Points
victor cooper
victor cooper
6,436 Points

better use float, display: inline-block adds a small margin, about 5px i think. to see the margin add a background-color to your divs.

dont forget to add a float clear after the divs that you added float too.

you can do a clear float like this <div style="clear:both;"></div>, add this div right after the parent that holds the floated divs.

you can do a more clean clear float like this

.clear-float:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

add the clear-float class to the parent that holds the floated divs and your good to go

Bernadette Aube
Bernadette Aube
2,602 Points
Bernadette Aube
Bernadette Aube
2,602 Points

Thank you, I figured that was what was going on with the display: Will use the float.

1 Answer

Mihail Mitrevski
seal-mask
.a{fill-rule:evenodd;}techdegree
Mihail Mitrevski
Full Stack JavaScript Techdegree Student 8,430 Points
Mihail Mitrevski
.a{fill-rule:evenodd;}techdegree
Mihail Mitrevski
Full Stack JavaScript Techdegree Student 8,430 Points

display:flex is the best choice for this case,you can easily align them on both size with "justify-between" and set the margin-left on the second column auto..or you can use CDN Bootstrap and put classes(col-lg-6) on both div containers :D