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 Robert Berube
Robert Berube
8,119 Points

Aligning divs with percentages

Seems like a simple question, but can't figure it out.

If and trying to align 2 divs in a row, like this:

<body>
<div id="1"></div>
<div id="2"></div>
</body>

And CSS

body {width: 90%;}

#1 {
display: inline-block;
box-sizing: border-box;
width: 25%
}
#2 {
display: inline-block;
box-sizing: border-box;
width:75%
}

I thought the children should then go into the width (25% + 75% = 100%) of the parent element, which is 90% of the page width, but the #2 is not fitting inline unless I bump it down to 74%. Otherwise, it is going down to the next line.

I must be making a common error or omitting a property. Any suggestions on what to look for, or am I just incorrect that you can sum percentage values to 100%?

Antonio Jaramillo
Antonio Jaramillo
15,604 Points

There is a wacky thing that happens in HTML with inline-block elements. If you add space between the tags of two elements (in your case your two divs) your browser interprets that as physical space. You can eliminate it by actual deleting the space between the closing element of your first div and your opening element of your second div. The other way is two set a negative margin of about -4px or so. Or you could just set one of your div's widths to 74%, like you did.

1 Answer

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,741 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,741 Points

First off, ID's can not start with a number, whereas classes can; I'd suggest using #one and #two in your example.

Here is my working solution on JSBin. Copying my CSS below as well (notice the floats):

body {
  width: 90%;
  background-color: yellow;
  margin: 0;
}

#one, #two {
  float: left;
  height: 10px;
}

#one {
  width: 25%;
  background-color: red;
}

#two {
  width: 75%;
  background-color: blue;
}

I'm sure there is a more elegant solution.

Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Yeah, I'd also go with the floats, but if you want to go with an inline-block layout system, then you have to deal with those wacky spaces.