Grids

Hi Demian - There are several ways to accomplish that. For example, you can use floats, positioning, flexbox or table display.

There is a great new Deep Dive called CSS Layout Techniques taught by Guil Hernandez that covers these areas.

I highly recommend checking it out!

If you mean with out CSS then probably not. By default all div's and elements of the like are "Block Level Elements" meaning they take up an entire block (line) unless you style otherwise using CSS (inline, inline-block). There are many methods for laying out your elements in CSS, the most common and perhaps most tricky is using Floats. But now-a-days there is a new protocol called Flexbox which is much easier and more intuitive. Chris Coyier has a great blog post over at CSS-Tricks covering the ins and outs of Flexbox.

If your not into using CSS and are simply trying to work some div's in a simple environment you could style them with inline css, this practice is not necessarily recommended, but it get's the job done.

For example:

   <div style="display: inline-block;"> Content </div>

If you're interested in Flexbox I've included the link to the post below.

A Complete Guide to Flexbox

Thanks, guys. When are grids most useful? Are floats being phased out now that all these other more efficient and "intuitive" methods exist?

-Demian

I think floats will always be around, but from day one they were always a bit quirky, one thing we should note is Flexbox does NOT have 100% browser support as of yet, but all the major ones are there (Safari, Chrome, Newer IE, Firefox, etc.) and the rest will follow suit soon enough.

As far as grids are concerned, I think these frameworks are fantastic and can really be customized to suit your needs. Using grids is just as good a practice as Flexbox, plus you don't have to worry about browser support. Some grid frameworks do overdo it a bit so it's probably best to stick with a simple 9 or 12 grid system unless you really need the fine alignment of a 24 grid system.

I think the largest complaints you will hear about grids are the lack of consistency between the various frameworks out there, and grids can somewhat clutter up your html. For example:

HTML Using Grids

<div class="row-fluid top-section">
    <article class="span6 explanation">
        <h1>This is html with Bootstrap's Grid Framework</h1>
        <p>Bootstrap uses classes of "row-fluid" to declare rows, and span+* to declare the width of sections in a row.</p>
    </article>
    <article class="span6 additional">
        <p>So a span6 div and another span6 div will create two div sections that will each occupy half of the page. A span12 would take up the entire page width. Grids are nice since you are somewhat styling as you write the html.</p>
    </article>
</div>

HTML Using Flexbox

<section class="top">
    <article class="explanation">
       <h1>This is html that will be styled by Flexbox</h1>
       <p>Since all of the styling will be done in css our classes and syntax can be much cleaner and have greater meaning to the browser and a viewer</p>
    </article>
    <article class="additional">
        <p>All the heavy lifting will be done in CSS, plus should you change your mind on a particular items layout, it's much easier to change a Flexbox than it is to go through your html and change all the classes.</p>
    </article>
</section>

But honestly this is really nothing to get concerned about.