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
Francis N
10,376 PointsI have a div container of 1000px and I want two columns (700px/300px) to float next to each other.
I have box-sizing but the two columns wont lay next to each other. I also have to mention I have a third column that I want to sit on the bottom of the two columns. I tried using percentage too but that didn't fix it. The only way I am able to fix it is if I set the container width to 1002px. But if I have box-sizing than I shouldn't have to do that, right? Can someone take a look at my code? How do I accomplish the desired request? I've followed the CSS layout videos but can't seem to figure it out.
You can preview the work in the img folder.
Here is my code: http://w.trhou.se/ws11hmzmel
3 Answers
Steven Parker
231,236 PointsI forked your workspace and in the preview I saw two items side-by-side in the 1000px container. So it seems to be working, or am I missing some aspect of the problem?
However, on concept alone, one red flag for me was if the content itself is border-box, then any border or padding on it will reduce the interior size. To be sure everything fits by the numbers, you'd want the container to be content-box, and its children to be border-box.
Also, remember there's no such thing as "margin-box", so any margins will also need extra space.
Francis N
10,376 PointsI see what I did. I had the blue dotted borders and didn't realize that had an effect on the floated containers. What a newb move by me. I used the blue borders to help me with margins/padding. doh! Anyway, thanks for taking a look and helping me out. Next question, how do I put the icons on the side menu next to the font like so in the preview? I currently have them inline but as you can see the link "Directions to Mill Valley Inspirent", you can see that it is double line. Right now the font wraps around and goes under the icon which is not what I want to do. Also the Welcome button on header is also aligned with the side menu. How can I get that aligned?
Steven Parker
231,236 PointsI'm still not seeing the issues. I see the icon followed by "DIRECTIONS TO MILL VALLEY INSPIRENT" all on one line. Are you using Chrome? (I am) I even added an extra word and the container expanded to keep it on one line.
I don't understand where exactly you want to place the "Welcome" list item (not a button). But you have the class "main-nav" on the parent UL which the CSS targets to give it float:right. This is where I see it displayed now.
Francis N
10,376 PointsHi Steven,
Just want to thank you for helping me out here.
Here is my updated workspace: https://w.trhou.se/2ffy7bgznc (you can find the mockup in the img folder under the name inspirent.jpg)
Is there an easier way to do what I did? To answer your question, I want the Welcome button to be placed in the header but have the 'user' icon and 'Welcome!' to be aligned above the links below. Also, I want the icon to be vertically aligned with the text. Right now its sits a little too high up. You can see what I am saying when you look at any text that is wrapped into two lines (ex. Directions to Mill Valley Inspirent, Request a Trade Appraisal, and Explore Financing Options).
Steven Parker
231,236 PointsI'm still not sure what you want to do with that Welcome "button". It appears to be aligned with the links now.
But for those icons, remember that they are actually backgrounds. Try: background-position: left;