0

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?

1 Answer 1

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.

1
  • you did answer almost all of them, but from answer #4 it means that i need to add clearfix on the container_12 as the grids inside are floated also in question1 for grid_12 am i right? Aug 6, 2011 at 4:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.