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

Carl Sergile
Carl Sergile
16,570 Points
Posted by Carl Sergile
Carl Sergile
16,570 Points

3 Divs side by side. No funny business.

SO I've been online for more than 2 hours trying to figure this out. Reading forums and going thru Stackflow, CodePen, Jfiddle, all of it. And I can't seem to center this div in between two elements floated left and right on either side. All I want to do is put three Divs in a row. 1.....2....3 in a row. It sounds super easy but for some reason I can't quite find the answer anywhere. Reaching out here to see if anyone can help. Things I've done so far:

.selector { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 20% //This can be set to the desired width.

^^This appears to work at first but once I try to put margins around the body to add room on the sides, the inside Div seems to be getting squished in and the bottom height seem to increase and doesn't align with my left or right div. I've also tried the margin: 0 auto guy and it doesn't quite work.

If you are reading and are attempting to provide a solution, please try and give me as little code as possible.

2 Answers

Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

If you are going to put three div's side by side using float try this:

(1) Float each div to the left.

(2) Remember that the browsers page width is 100%. Try giving each div a width of 30% as this will allow room for margins, borders and padding.

(3) Use % over px for the elements width. % makes each div adjust to the browsers width when changed, where px does not.

If you haven't already studied about the box model (it's a CSS thing) do so. Understand the CSS box model is fundamental knowledge for anyone who want to code out a web page.

napoleondevilla
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
napoleondevilla
Front End Web Development Techdegree Graduate 15,381 Points
napoleondevilla
.a{fill-rule:evenodd;}techdegree seal-36
napoleondevilla
Front End Web Development Techdegree Graduate 15,381 Points

Here's a simple example using CSS flexbox. If you're unfamiliar with it, you should take a look at the flexbox course here. It's really useful and you don't have to mess with floating elements.

The three divs with class "flex-item" are wrapped by a parent div with an id of "flex-container"

<div id="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>

#flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 500px;
    border: 1px black solid;
    margin: 0 auto;
}

.flex-item {
    width: 100px;
    height: 200px;
    border: 1px black solid;
    background: #369;
}

The important parts here are the display, flex-direction and justify content properties. display: flex turns the container into a flex container and all of the child elements inside of it into flex items. flex-direction: row makes the divs side by side as a row instead of on top of each other as a column, which you can see if you change it to flex-direction: column. And justify-content: space-between distributes space evenly between the divs.

This was a really simple example and you can find a cheat sheet here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more properties, but again I would recommend going through the flexbox course here.