Question

I did the below it worked,

<div class="container_12">
<div class="grid_6">Some Text</div>
<div class="grid_6">Some Text</div>
</div>

result: Two boxes inside with 10px left and right margin appeared.

Question 1:

Below does not work, one box is pushed below another why? What should i do to fix it?

<div class="container_12">
<div class="grid_12">
<div class="grid_6">Some Text</div>
<div class="grid_6">Some Text</div>
</div>
</div>

Question 2:

With the MarkUp 1, which i stated at start of question i substitued the text with Google visualization charts, they behave like Question1. One chart is pushed below another.

Question 3

Do i always have to specify clears after the the grids ads up to containers width. for example,

<div class="container_12">
<div class="grid_6">Some Text</div>
<div class="grid_6">Some Text</div>
<div class="clear"></div>
<div class="grid_12"></div>
</div>

Question 4

I have heard that clearfix does the same as clearing, where do i use it on the parent container or the divs inside them?

Answer 1

Question 1

You need to add a class of “alpha” on the first div to remove the left margin and a class of “omega” on the last div to remove the right margin.

Whenever you are nesting divs you need to add alpha and omega classes to the first and last divs.

<div class="container_12">
    <div class="grid_12">
        <div class="grid_6 alpha">Some Text</div>
        <div class="grid_6 omega">Some Text</div>
    </div>
</div>

Question 2

This may be because the content ie the charts are wider than the div.

Question 3

Use a clear div when only when you want to clear all the elements above it.

Question 4

Whenever you have a div with floated elements inside it you can give it a class of clearfix to clear everything inside.