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 missgeekbunny
missgeekbunny
37,033 Points

Tell me this gets easier with practice

I keep having issues with getting multiple divs on 1 line to display inline. I usually eventually figure it out and get it to show up at least mostly as I wanted it. But I guess I'm looking for reassurance. Does getting things to show up inline get easier as you make more sites and have more practice? Or should I just plan to always have to spend extra time getting things to align how I want?

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I think it does. It's the same technique once you get it down. You'll know what inherently displays inline, and what displays as a block. You'll start figuring out floats, paddings, marginss, clearfixes, etc that will help you get the things inline. And there is no shame in redoing the CSS lessons here.

I assume you're talking about "grids" of sorts. One of my favorite articles on that that I reference to all the time is http://css-tricks.com/dont-overthink-it-grids/

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Getting stuff inline is easy. Float:left and make sure the total widths of all the divs equal 100% or less. Then use left margin on the first div to space to middle. Remember, if you're using borders that that adds to the overall width of the div so two 50% width divs with 1px border will cause problems. To solve this, I run a little global CSS at the top of all CSS files. Using the * selector to select everything, I set box-sizing to border-box and margin and padding to 0. I also give the body 0 margin and padding to sort out those issues related to browsers inputting borders and padding.

missgeekbunny
missgeekbunny
37,033 Points

Maybe that last thing you mentioned is my problem the browser inserting borders and I need to fix those issues before I start designing. I just know that I often go to design and I find that 50% + 40% somehow equals more than 100%.

Patrick Cooney
Patrick Cooney
12,216 Points

I'm on my ipad so it's a pain to do links but google Yahoo's CSS reset. It's always good practice to use a reset of some sort. I just use yahoo's so I don't have to set anything up. (Use the CDN version)

Also it does get easier, but then you choose a new language, don't use html or CSS for awhile and forget all the tag and attribute names and it becomes hard again. Haha.

missgeekbunny
missgeekbunny
37,033 Points

Well I feel like I'm squarely in my happy place of CSS, HTML and PHP (with wordpress syntax involved as well) I just need to work on perfecting them as much as I can. So mostly, I get them now I just need to get to a basic good at them. Oh and that learning jquery well enough to do more than just manipulate someone elses code.

Matt Campbell
Matt Campbell
9,767 Points

Patrick Cooney - True that. i did something outside of WordPress for the first time in weeks the other day and could barely remember how to link a stylesheet. lol. Soon comes back though.

Had another far more interesting thing I wanted to say as well but can't remember what it was!