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

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;
}