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

Grant Bates
Grant Bates
1,915 Points
Posted by Grant Bates
Grant Bates
1,915 Points

Simple CSS alignment problem.

Having trouble getting these colored boxes to all appear on the same line side by side without any spacing between.

http://jsfiddle.net/austincarnivore/0k6vwuz1/5/

Rather than just delete the code and keep on training I figured I would post here and see if anyone could turn this into a teachable moment.

Thanks.

3 Answers

Aurelien Roux
Aurelien Roux
25,567 Points
Aurelien Roux
Aurelien Roux
25,567 Points

here is how I have done it:

in your HTML, put a class of float to all divs:

div id="n1" class="float">test</div>

in the CSS, apply a float left to the class : .float { float:left; }

all Divs are now on the same line without any spacing between,

Grant Bates
Grant Bates
1,915 Points
Grant Bates
Grant Bates
1,915 Points

Thanks this works great.

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Grant:

You could try something like:

CodeSnippet.html 
        <div id="main">
            <div id="n1">test</div>
            <div id="n2">test</div>
            <div id="n3">test</div>
            <div id="n4">test</div>
            <div id="n5">test</div>
        </div>
CodeForMainID.css 
#main {
    display: flex;
    align-items: center;
}

Not sure that is exactly what you were looking for, but they lined up in your jsFiddle page when I used it.

Happy coding,

Ken

Grant Bates
Grant Bates
1,915 Points
Grant Bates
Grant Bates
1,915 Points

Thanks Ken, I have not worked with "display: flex" yet. I look forward to it.

Aurelien Roux
Aurelien Roux
25,567 Points
Aurelien Roux
Aurelien Roux
25,567 Points

or you can also set all the divs as inline-block

#n1, #n2, #n3, #n4, #n5 {
    display:inline-block;
}