Question

I have confused in putting margin-top in my div#q, it affects also the div#m.

I just want them to be separated, the div#m will be on top and the div#q in the bottom, with having a space between them.

I tried this approach but I have failed, does anyone have a suggestion about my code?

I have this html :

<div id="m">
    <div id="c" style="background:red;">
        <h3>test 1 </h3>
        <ul>
            <li>asd</li>
            <li>asds</li>
            <li>asd</li>
        </ul>
    </div>
        <div id="c" style="background:blue;">
        <h3>test 2 </h3>
        <ul>
            <li>asd</li>
            <li>asds</li>
            <li>asd</li>
        </ul>
    </div>
    <div id="c" style="background:yellow;">
        <h3>test 3 </h3>
        <ul>
            <li>asd</li>
            <li>asds</li>
            <li>asd</li>
        </ul>
    </div>
    <div id="c" style="background:green;">
        <h3>test 4 </h3>
        <ul>
            <li>asd</li>
            <li>asds</li>
            <li>asd</li>
        </ul>
    </div>

</div>
<div id="q" style="background:violet;">
</div>

css :

#m{
    width :400px;
}
#c{
    width:33.33%;
    float : left;
}
#q{
    width: 300px;
    height : 200px;
    margin-top: 20px;
}

Answer 1

Clear your floats. For example with overflow: hidden – DEMO

#m{
    width: 400px;
    overflow: hidden;
}

Also don’t forget that id-s should be unique. If you need the same style to be applied on multiple elements use class instead.