I just can't conceptualise grid systems.

Put the text in a div with class container-1 and width of 50% floated left. Put contact form in a div with class of container-2 and width of 50% floated right. Set everything, using * to box-sizing:border-box and do the same for -moz- prefix and you're done. Text on left, contact form on right and now you can use padding to increase gap or drop a percentage on the width and add 1% margin right and left respectively.

I don't use grids, I find them restrictive. What if I set up a page with 4 columns each 25% wide and I want something that's a third of the width of the page? I'm stuck now. They're very useful for helping with laying things out as a beginner but you'll soon find them a hindrance and pain in the backside. That's just my opinion though.

So, here is the deal. Grids are meant to simplify your design process by laying out something of a map to design on.

So, if you build a grid that is 12 columns, then you fill certain columns with divs or objects. You start at the top left, and fill towards the right. That means that if your first div is set to "6" columns (perhaps, grid_6), then it will take up space 6 columns wide, with a default height of zero, that expands with the content filling the div.

So, if you then create another div of "6" columns (grid_6, perhaps) that will fill in your first "row."

So, what I'd do, is note the width your grid is built according to (800px, 900px, 1000px, 1200px, etc...). If you want a search bar, or a small form, you probably only need 200px. So, if you have a 1000px grid set up, split into 10 columns of 100px, then you are able to establish your "floated" text column by assigning it to the first 8 columns (grid_8, perhaps). Then, your form can be set to 2 columns (grid_2, perhaps).

This makes the HTML structure work similarly to CSS. It reads from the top down (unless otherwise specified) and builds out your grid accordingly.

I hope this is helpful. Let me know what questions you have, if you have them!

Zen

It's not that it's perfect but you could check my own personal webpage

Notice this bit

           <div class="row">            
            <div class="large-4 medium-4 columns"> <!-- I'm a 4 column size bit if displayed on large to medium screens. I'm a 12 column size div if displayed on small screens (that's default) -->
                <h3 class="subheader"><a href="http://www.sabiavida.com">SabiaVida</a></h3>
                <p><span class="label">minimalismo</span> <span class="label">productividad</span></p>
                <p>Blog de minimalismo y productividad personal que se actualiza, al menos, los martes y los jueves</p>
            </div>

            <div class="large-4 medium-4 columns">
                <h3 class="subheader"><a href="http://www.haikuda.com">Haikuda</a></h3>
                <p><span class="label">poesía</span> <span class="label">haiku</span></p>
                <p>Como el mismo haiku, debe ser un descubrimiento tanto para el autor como para el lector. Por eso tiene un diseño radicalmente minimalista. Normalmente, publico un haiku al día.</p>
            </div>

            <div class="large-4 medium-4 columns">
                <h3 class="subheader"><a href="http://www.imiotherwind.com">Imi Otherwind</a></h3>
                <p><span class="label">novela</span> <span class="label">fantasía</span> <span class="label">lij</span> <span class="label">steampunk</span></p>
                <blockquote>Es la era del telégrafo, del dirigible y la ciencia. El Reino de Logres gobierna el mundo. Imi Otherwind, de doce años, llega a la capital buscando un futuro.</blockquote>
            </div>

(Sorry the text it's in Spanish, it's just showing a couple of my blogs and stuff like that).

Anyway, you'll see there is a row div. That row is 12 "columns" wide. The actual dimensions of the columns depends on how big the screen is, so a column is 1/12 of whatever screen the user employs.

This row bit is split in three, 4 columns divs, taking 1/3 of your screen, whatever it is. Now, foundation the framework, I'm using lets me tweak it a bit more, so I'm having 4 columns div on medium and large screens but 12 columns div (so taking the full screen) if using a small screen such as a smart phone's.

By the way, it took me a while to figure it out too, so my advice is a) choose a framework, b) read the documentation, c) do something with it and when something breaks read the documentation again.

Hope that helps

Sorry guys I'm so new to this i just don't understand a thing your all saying.

What do i write in the code to get on block of text to sit next to the other using the grid system??!

Sorry!

Sorry guys I'm so new to this i just don't understand a thing your all saying.

What do i write in the code to get on block of text to sit next to the other using the grid system??!

Sorry!

No worries, James. I will start from the ground and build up. Bear with me through the beginning if you already understand it.

HTML is said to be the structure of any webpage. It provides a skeleton to be covered and styled later on.

CSS is the skin, tattoos and clothes that go on the skeleton. CSS makes 'styles' the structure that HTML provides.

A grid is a CSS file that gives the designer basic styling guide to call upon to help the designer build a fluid website with ease. It works like this:

The grid file is created. Within the grid file will be a few key elements. First, it will designate a container. This sets a max-width for the grid. It may look like this:

div#container, div.container { 
    position: relative; 
    width: 940px; 
    margin: 0 auto; 
    padding: 0; }

Then, it designates a set of columns set to equivalent widths. Which might look like this:

.column-row, .row { margin: 0 0 18px -20px; }
.column, .columns { float: left; display: inline; margin: 0 0 0 20px; }

.one { width: 60px; }
.two { width: 140px; }
.three { width: 220px; }
.four { width: 300px; }
.five { width: 380px; }
.six { width: 460px; }
.seven { width: 540px; }
.eight { width: 620px; }
.nine { width: 700px; }
.ten { width: 780px; }
.eleven { width: 860px; }
.twelve { width: 940px; }

Then a good grid setup will have a variety of other elements to help with cross-browser compatibility, options for floating left or right, etc... But all grids must have at least the two elements mentioned above.

So, how does calling on the grid file work? It's like this.

Based on the setup I offered above, the columns are given a width of 60px (see the '.one' line above). And, there are a total of twelve columns specified.

If you were to try and envision it, something like this might help:

|-- '.one', 60px --|-- '.two', 60px --|-- '.three', 60px --|

This would continue through until column '.twelve'. It looks very much like a standard grid. View this picture for a better example: http://jepserbernardino.com/wp-content/uploads/2009/03/grid.png

You might ask why '.one' spans 60px, but when '.two' is added it is set to 140px. The math doesn't seem to work. 60px + 60px = 120px, not 140px. That is because each column is allotted a 'gutter.' This gutter gives a bit of room to work with between each column, for getting just the right amount of space. The 'gutter' is set at the very top of the code, under the class '.column, .columns'.

So, hopefully, you understand the theory behind a grid. You see how it gets set up, and what it looks like once it is set up. But how do you use it?

Once your grid is called upon in your HTML file, then you can call upon it and structure your website.

In order to call upon it, you would create a div and call a certain number of columns from your grid. For example.

 <div class=".three"></div> 

This would create a div that spans across three of your columns, or 220px (see the code setup section above).

There you go! Then, add content to that div, set another class for it so that you can style it in the style.css file later and you're all set.

Earlier you asked about doing a text section on the left, with a form section on the right. Check out this code pen and see how it might be done using a grid:

http://cdpn.io/sdwof

Remember, sometimes the browser has default margins and things. You may need to override those, just mess around with it. Also, check out http://zurb.com/playground/css-grid-builder, which is the website that provided the code for this example. It is also a helpful tool.

Merry Christmas!